From d33408a7082a43ea7747fee5c840e1a56eb8c70b Mon Sep 17 00:00:00 2001
From: Orlando Valverde <4467518+septum@users.noreply.github.com>
Date: Mon, 14 Oct 2024 15:40:58 -0600
Subject: [PATCH] frontend: Set theme spacing (#3138)

---
 frontend/packages/core/src/Theme/theme.tsx | 43 ++++++++++++++++++++++
 1 file changed, 43 insertions(+)

diff --git a/frontend/packages/core/src/Theme/theme.tsx b/frontend/packages/core/src/Theme/theme.tsx
index d2ea3cd33e..1717888277 100644
--- a/frontend/packages/core/src/Theme/theme.tsx
+++ b/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",