Add custom theme

2025-11-04 19:20:17 +01:00
parent d05747e60e
commit 20a42f3c55
11 changed files with 1612 additions and 25 deletions
--- a/matrixgw_frontend/src/theme/customizations/surfaces.ts
+++ b/matrixgw_frontend/src/theme/customizations/surfaces.ts
@@ -0,0 +1,113 @@
+import { alpha, type Theme, type Components } from "@mui/material/styles";
+import { gray } from "../themePrimitives";
+
+/* eslint-disable import/prefer-default-export */
+export const surfacesCustomizations: Components<Theme> = {
+  MuiAccordion: {
+    defaultProps: {
+      elevation: 0,
+      disableGutters: true,
+    },
+    styleOverrides: {
+      root: ({ theme }) => ({
+        padding: 4,
+        overflow: "clip",
+        backgroundColor: (theme.vars || theme).palette.background.default,
+        border: "1px solid",
+        borderColor: (theme.vars || theme).palette.divider,
+        ":before": {
+          backgroundColor: "transparent",
+        },
+        "&:not(:last-of-type)": {
+          borderBottom: "none",
+        },
+        "&:first-of-type": {
+          borderTopLeftRadius: (theme.vars || theme).shape.borderRadius,
+          borderTopRightRadius: (theme.vars || theme).shape.borderRadius,
+        },
+        "&:last-of-type": {
+          borderBottomLeftRadius: (theme.vars || theme).shape.borderRadius,
+          borderBottomRightRadius: (theme.vars || theme).shape.borderRadius,
+        },
+      }),
+    },
+  },
+  MuiAccordionSummary: {
+    styleOverrides: {
+      root: ({ theme }) => ({
+        border: "none",
+        borderRadius: 8,
+        "&:hover": { backgroundColor: gray[50] },
+        "&:focus-visible": { backgroundColor: "transparent" },
+        ...theme.applyStyles("dark", {
+          "&:hover": { backgroundColor: gray[800] },
+        }),
+      }),
+    },
+  },
+  MuiAccordionDetails: {
+    styleOverrides: {
+      root: { mb: 20, border: "none" },
+    },
+  },
+  MuiPaper: {
+    defaultProps: {
+      elevation: 0,
+    },
+  },
+  MuiCard: {
+    styleOverrides: {
+      root: ({ theme }) => {
+        return {
+          padding: 16,
+          gap: 16,
+          transition: "all 100ms ease",
+          backgroundColor: gray[50],
+          borderRadius: (theme.vars || theme).shape.borderRadius,
+          border: `1px solid ${(theme.vars || theme).palette.divider}`,
+          boxShadow: "none",
+          ...theme.applyStyles("dark", {
+            backgroundColor: gray[800],
+          }),
+          variants: [
+            {
+              props: {
+                variant: "outlined",
+              },
+              style: {
+                border: `1px solid ${(theme.vars || theme).palette.divider}`,
+                boxShadow: "none",
+                background: "hsl(0, 0%, 100%)",
+                ...theme.applyStyles("dark", {
+                  background: alpha(gray[900], 0.4),
+                }),
+              },
+            },
+          ],
+        };
+      },
+    },
+  },
+  MuiCardContent: {
+    styleOverrides: {
+      root: {
+        padding: 0,
+        "&:last-child": { paddingBottom: 0 },
+      },
+    },
+  },
+  MuiCardHeader: {
+    styleOverrides: {
+      root: {
+        padding: 0,
+      },
+    },
+  },
+  MuiCardActions: {
+    styleOverrides: {
+      root: {
+        padding: 0,
+      },
+    },
+  },
+};