frontend: Set theme spacing (#3138)

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

@@ -15,11 +15,54 @@ declare module "@emotion/react" {
   export interface Theme extends MuiTheme {}
 }
 
+declare module "@mui/material/styles" {
+  interface Theme {
+    clutch: {
+      spacing: {
+        none: number;
+        xs: number;
+        sm: number;
+        base: number;
+        md: number;
+        lg: number;
+        xl: number;
+      };
+    };
+  }
+  interface ThemeOptions {
+    clutch: {
+      spacing: {
+        none: number;
+        xs: number;
+        sm: number;
+        base: number;
+        md: number;
+        lg: number;
+        xl: number;
+      };
+    };
+  }
+}
+
 // Create a Material UI theme is propagated to all children.
 const createTheme = (variant: ThemeVariant): MuiTheme => {
   return createMuiTheme({
     colors: clutchColors(variant),
     palette: palette(variant),
+    // `8` is the default scaling factor in MUI, we are setting it again to make it explicit
+    // https://v5.mui.com/material-ui/customization/spacing/
+    spacing: 8,
+    clutch: {
+      spacing: {
+        none: 0,
+        xs: 0.5,
+        sm: 1,
+        base: 2,
+        md: 3,
+        lg: 4,
+        xl: 5,
+      },
+    },
     transitions: {
       // https://material-ui.com/getting-started/faq/#how-can-i-disable-transitions-globally
       create: () => "none",