Merge pull request #54 from uwblueprint/material_ui_theming

Material UI theming
uwblueprint · Aug 2, 2024 · fabf01b · fabf01b
2 parents b32573d + ab972e3
commit fabf01b
Show file tree

Hide file tree

Showing 3 changed files with 358 additions and 1 deletion.
diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx
@@ -3,12 +3,17 @@ import { createRoot } from "react-dom/client";
 
 import "./index.css";
 // eslint-disable-next-line import/no-extraneous-dependencies
+import { ThemeProvider } from "@mui/material/styles";
 import App from "./App";
 import reportWebVitals from "./reportWebVitals";
 
+import getTheme from "./theme/theme";
+
 createRoot(document.getElementById("root") as HTMLElement).render(
   <React.StrictMode>
-    <App />
+    <ThemeProvider theme={getTheme(false)}>
+      <App />
+    </ThemeProvider>
   </React.StrictMode>,
 );
 

diff --git a/frontend/src/theme/palette.ts b/frontend/src/theme/palette.ts
@@ -0,0 +1,114 @@
+export type Color = `#${string}`;
+
+export type Palette = {
+  0: Color;
+  10: Color;
+  20: Color;
+  30: Color;
+  40: Color;
+  50: Color;
+  60: Color;
+  70: Color;
+  80: Color;
+  90: Color;
+  95: Color;
+  99: Color;
+  100: Color;
+};
+
+// Defined in Figma Design Document
+export const learner: Palette = {
+  0: "#000000",
+  10: "#001F25",
+  20: "#00363F",
+  30: "#004E5A",
+  40: "#006877",
+  50: "#008395",
+  60: "#289EB2",
+  70: "#4DB9CE",
+  80: "#6CD5EA",
+  90: "#A4EEFF",
+  95: "#D5F7FF",
+  99: "#F7FDFF",
+  100: "#FFFFFF",
+};
+
+export const administrator: Palette = {
+  0: "#000000",
+  10: "#380D00",
+  20: "#5B1A00",
+  30: "#812900",
+  40: "#A93800",
+  50: "#CB4F1C",
+  60: "#EE6835",
+  70: "#F78C61",
+  80: "#FAB59A",
+  90: "#FCDCCF",
+  95: "#FDEDE8",
+  99: "#FFF7F5",
+  100: "#FFFFFF",
+};
+
+export const facilitator: Palette = {
+  0: "#000000",
+  10: "#030667",
+  20: "#1F257A",
+  30: "#373D91",
+  40: "#4F56AB",
+  50: "#696FC6",
+  60: "#8289E2",
+  70: "#9DA4FE",
+  80: "#BEC2FF",
+  90: "#E0E0FF",
+  95: "#F1EFFF",
+  99: "#FFFBFF",
+  100: "#FFFFFF",
+};
+
+export const error: Palette = {
+  0: "#000000",
+  10: "#410002",
+  20: "#00363F",
+  30: "#004E5A",
+  40: "#690005",
+  50: "#DE3730",
+  60: "#FF5449",
+  70: "#FF897D",
+  80: "#FFB4AB",
+  90: "#FFDAD6",
+  95: "#FFEDEA",
+  99: "#FFFBFF",
+  100: "#FFFFFF",
+};
+
+export const neutral: Palette = {
+  0: "#000000",
+  10: "#191C1D",
+  20: "#2E3132",
+  30: "#444748",
+  40: "#5C5F5F",
+  50: "#757778",
+  60: "#8F9192",
+  70: "#AAABAC",
+  80: "#C5C7C7",
+  90: "#E1E3E3",
+  95: "#F0F1F1",
+  99: "#F7FDFF",
+  100: "#FFFFFF",
+};
+
+export const neutralVariant: Palette = {
+  0: "#000000",
+  10: "#151D1F",
+  20: "#2A3234",
+  30: "#40484A",
+  40: "#586062",
+  50: "#71787A",
+  60: "#8A9294",
+  70: "#A5ACAF",
+  80: "#C0C8CA",
+  90: "#DCE4E6",
+  95: "#EAF2F4",
+  99: "#F7FDFF",
+  100: "#FFFFFF",
+};
diff --git a/frontend/src/theme/theme.ts b/frontend/src/theme/theme.ts
@@ -0,0 +1,238 @@
+import {
+  createTheme,
+  PaletteOptions,
+  SimplePaletteColorOptions,
+  TypographyOptions,
+} from "@mui/material/styles";
+import { TypographyStyleOptions } from "@mui/material/styles/createTypography";
+import { error, learner, administrator, facilitator } from "./palette";
+import "@fontsource/roboto";
+
+// adding custom attributes to palette
+declare module "@mui/material/styles" {
+  // allow configuration using `createTheme`
+  interface PaletteOptions {
+    // Figma: primary colour palette
+    learner: SimplePaletteColorOptions;
+
+    // Figma: secondary colour palette
+    administrator: SimplePaletteColorOptions;
+
+    // Figma: tertiary colour palette
+    facilitator: SimplePaletteColorOptions;
+  }
+
+  interface TypographyOptions {
+    // Figma: typography section
+    displayLarge?: TypographyStyleOptions;
+    displayMedium?: TypographyStyleOptions;
+    displaySmall?: TypographyStyleOptions;
+    headlineLarge?: TypographyStyleOptions;
+    headlineMedium?: TypographyStyleOptions;
+    headlineSmall?: TypographyStyleOptions;
+    titleLarge?: TypographyStyleOptions;
+    titleMedium?: TypographyStyleOptions;
+    titleSmall?: TypographyStyleOptions;
+    labelLarge?: TypographyStyleOptions;
+    labelMedium?: TypographyStyleOptions;
+    labelSmall?: TypographyStyleOptions;
+    bodyLarge?: TypographyStyleOptions;
+    bodyMedium?: TypographyStyleOptions;
+    bodySmall?: TypographyStyleOptions;
+  }
+
+  interface Theme {
+    palette: PaletteOptions;
+    typography: TypographyOptions;
+  }
+}
+
+// Button Setting
+// Allows the custom color properties to be passed in <Button color = "">
+declare module "@mui/material/Button" {
+  interface ButtonPropsColorOverrides {
+    learner: true;
+    administrator: true;
+    facilitator: true;
+  }
+}
+
+// Typography Setting
+// Allows the custom font properties to be passed in <Typography variant = "">
+declare module "@mui/material/Typography" {
+  interface TypographyPropsVariantOverrides {
+    displayLarge: true;
+    displayMedium: true;
+    displaySmall: true;
+    headlineLarge: true;
+    headlineMedium: true;
+    headlineSmall: true;
+    titleLarge: true;
+    titleMedium: true;
+    titleSmall: true;
+    labelLarge: true;
+    labelMedium: true;
+    labelSmall: true;
+    bodyLarge: true;
+    bodyMedium: true;
+    bodySmall: true;
+  }
+}
+
+// Color Palettes
+const lightThemePalette: PaletteOptions = {
+  mode: "light",
+  learner: {
+    main: learner[40],
+    light: learner[90], // container - corresponds to Figma design document
+    dark: learner[10], // on container
+  },
+  administrator: {
+    main: administrator[40],
+    light: administrator[90],
+    dark: administrator[10],
+  },
+  facilitator: {
+    main: facilitator[40],
+    light: facilitator[90],
+    dark: facilitator[10],
+  },
+  error: {
+    main: error[40],
+    light: error[90],
+    dark: error[10],
+  },
+};
+
+const darkThemePalette: PaletteOptions = {
+  mode: "dark",
+  learner: {
+    main: learner[80],
+    light: learner[30],
+    dark: learner[90],
+  },
+  administrator: {
+    main: administrator[80],
+    light: administrator[30],
+    dark: administrator[90],
+  },
+  facilitator: {
+    main: facilitator[80],
+    light: facilitator[30],
+    dark: facilitator[90],
+  },
+  error: {
+    main: error[80],
+    light: error[30],
+    dark: error[90],
+  },
+};
+
+const typography: TypographyOptions = {
+  displayLarge: {
+    fontSize: "57pt",
+    fontWeight: 700,
+    lineHeight: "64pt",
+    letterSpacing: "-0.25pt",
+  },
+  displayMedium: {
+    fontSize: "45pt",
+    fontWeight: 700,
+    lineHeight: "52pt",
+    letterSpacing: "0pt",
+  },
+  displaySmall: {
+    fontSize: "36pt",
+    fontWeight: 700,
+    lineHeight: "44pt",
+    letterSpacing: "0pt",
+  },
+  headlineLarge: {
+    fontSize: "32pt",
+    fontWeight: 600,
+    lineHeight: "40pt",
+    letterSpacing: "0pt",
+  },
+  headlineMedium: {
+    fontSize: "28pt",
+    fontWeight: 600,
+    lineHeight: "36pt",
+    letterSpacing: "0pt",
+  },
+  headlineSmall: {
+    fontSize: "24pt",
+    fontWeight: 600,
+    lineHeight: "32pt",
+    letterSpacing: "0pt",
+  },
+  titleLarge: {
+    fontSize: "22pt",
+    fontWeight: 600,
+    lineHeight: "28pt",
+    letterSpacing: "0pt",
+  },
+  titleMedium: {
+    fontSize: "16pt",
+    fontWeight: 600,
+    lineHeight: "24pt",
+    letterSpacing: "+0.15pt",
+  },
+  titleSmall: {
+    fontSize: "24pt",
+    fontWeight: 600,
+    lineHeight: "20pt",
+    letterSpacing: "+0.1pt",
+  },
+  labelLarge: {
+    fontSize: "14pt",
+    fontWeight: 300,
+    lineHeight: "20pt",
+    letterSpacing: "+0.1pt",
+    textTransform: "uppercase",
+  },
+  labelMedium: {
+    fontSize: "12pt",
+    fontWeight: 300,
+    lineHeight: "16pt",
+    letterSpacing: "+0.5pt",
+    textTransform: "uppercase",
+  },
+  labelSmall: {
+    fontSize: "11pt",
+    fontWeight: 300,
+    lineHeight: "16pt",
+    letterSpacing: "+0.5pt",
+    textTransform: "uppercase",
+  },
+  bodyLarge: {
+    fontSize: "16pt",
+    fontWeight: 400,
+    lineHeight: "24pt",
+    letterSpacing: "+0.5pt",
+  },
+  bodyMedium: {
+    fontSize: "14pt",
+    fontWeight: 400,
+    lineHeight: "20pt",
+    letterSpacing: "+0.25pt",
+  },
+  bodySmall: {
+    fontSize: "12pt",
+    fontWeight: 400,
+    lineHeight: "16pt",
+    letterSpacing: "+0.4pt",
+  },
+};
+
+const getTheme = (darkMode: boolean) => {
+  const theme = createTheme({
+    typography: {
+      fontFamily: "Roboto, sans-serif",
+      ...typography,
+    },
+    palette: darkMode ? { ...darkThemePalette } : { ...lightThemePalette },
+  });
+  return theme;
+};
+
+export default getTheme;