Simplify Theme

frontends/ol-components/src/components/Carousel/Carousel.stories.tsx

@@ -12,7 +12,7 @@ const Panel = styled.div({
   alignItems: "center",
   color: theme.palette.primary.main,
   backgroundColor: theme.palette.grey[300],
-  borderShadow: theme.custom.shadow,
+  borderShadow: "3 4 12 rgb(0 0 0 / 36%)",
 })
 const Slide: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   return <Panel>{children}</Panel>

frontends/ol-components/src/components/FormDialog/FormDialog.tsx

@@ -45,9 +45,6 @@ interface FormDialogProps {
    * form inputs but still semantically mark inputs as `<input required />`.
    */
   noValidate?: boolean
-  /**
-   * The form content. These will be direct children of MUI's [DialogContent](https://mui.com/material-ui/api/dialog-content/)
-   */
   children?: React.ReactNode
   actions?: DialogProps["actions"]
   /**

frontends/ol-components/src/components/RoutedDrawer/RoutedDrawer.stories.tsx

@@ -8,7 +8,7 @@ const Content = styled.div({
   width: 400,
   padding: 80,
   color: theme.palette.primary.main,
-  borderShadow: theme.custom.shadow,
+  borderShadow: "3 4 12 rgb(0 0 0 / 36%)",
 })
 
 const meta: Meta<typeof RoutedDrawer> = {

frontends/ol-components/src/components/ThemeProvider/MITLearnGlobalStyles.tsx

@@ -56,70 +56,13 @@ const pageCss = css`
   }
 `
 
-const formCss = css`
-  form,
-  .form {
-    select {
-      background: #f8f8f8;
-      border: 1px solid #bbb;
-      font-size: 15px;
-      color: ${theme.typography.body1.color};
-      height: 39px;
-
-      /* If you add too much padding here, the options won't show in IE */
-      padding: 8px 20px;
-      width: 100%;
-    }
-  }
-
-  .MuiDialogContent-root {
-    .MuiFormControl-root:first-of-type {
-      margin-top: 0;
-    }
-
-    .MuiFormControl-root:last-child {
-      margin-bottom: 0;
-    }
-  }
-`
-
-const muiCss = css`
-  #app-container {
-    .MuiCardContent-root {
-      padding-bottom: 16px;
-
-      &:last-child {
-        padding-bottom: 16px; /* MUI puts extra padding on the last child by default. We don't want it. */
-      }
-
-      > *:first-of-type {
-        margin-top: 0; /* No extra space for the first child, beyond the card content's padding. */
-      }
-    }
-
-    .MuiCardActions-root {
-      padding-left: 16px;
-      padding-right: 16px;
-    }
-
-    .MuiCard-root {
-      transition-duration: ${theme.custom.transitionDuration};
-      transition-property: box-shadow;
-
-      &:hover {
-        box-shadow: ${theme.custom.shadow};
-      }
-    }
-  }
-`
-
 const MITLearnGlobalStyles: React.FC = () => {
   /**
    * Preload the font just in case emotion doesn't put the import near top of
    * HTML.
    */
   preload(ADOBE_FONT_URL, { as: "style", fetchPriority: "high" })
-  return <Global styles={[pageCss, formCss, muiCss]}></Global>
+  return <Global styles={[pageCss]}></Global>
 }
 
 export { MITLearnGlobalStyles }

frontends/ol-components/src/components/ThemeProvider/ThemeProvider.tsx

@@ -11,17 +11,7 @@ import * as chips from "./chips"
 import { colors } from "./colors"
 import type { CustomTheme } from "../../types/theme"
 
-const shadow = {
-  shadowOffsetX: 3,
-  shadowOffsetY: 4,
-  shadowColor: "rgb(0 0 0 / 36%)",
-  shadowBlurRadius: 12,
-}
-
-// To replace ../scss/theme.scss for #236 as we refactor it out
 const custom: ThemeOptions["custom"] = {
-  transitionDuration: "300ms",
-  shadow: `${shadow.shadowOffsetX} ${shadow.shadowOffsetY} ${shadow.shadowBlurRadius} ${shadow.shadowColor}`,
   colors,
   dimensions: {
     headerHeight: "72px",

frontends/ol-components/src/types/theme.d.ts

@@ -10,8 +10,6 @@ export interface ColorGroup {
 }
 
 interface CustomTheme {
-  transitionDuration: string
-  shadow: string
   colors: {
     mitRed: string
     silverGray: string