fix

src/layouts/WrapRootElement.tsx

@@ -1,14 +1,8 @@
-import { Global, ThemeProvider as EmotionThemeProvider } from "@emotion/react";
-import CssBaseline from "@mui/material/CssBaseline";
-import { Experimental_CssVarsProvider as CssVarsProvider } from "@mui/material/styles/CssVarsProvider";
-
-import { useTheme } from "./themes/useTheme";
+import { CustomThemeProvider } from "./themes";
 
 import type Sentry from "@sentry/browser";
 import type { ReactNode } from "react";
 
-import { FONT_FAMILY } from "@/components/markdown/constants";
-
 interface WrapRootElementProps {
   children: ReactNode;
 }
@@ -28,35 +22,5 @@ declare global {
 export const WrapRootElement = ({
   children,
 }: WrapRootElementProps): JSX.Element => {
-  const theme = useTheme();
-
-  return (
-    <EmotionThemeProvider theme={theme}>
-      <CssVarsProvider defaultMode="system" theme={theme}>
-        <Global
-          styles={{
-            html: {
-              height: "100%",
-            },
-            body: {
-              height: "100%",
-              cursor: "default",
-              fontFamily: FONT_FAMILY,
-              overflowWrap: "break-word",
-            },
-            "#___gatsby": {
-              height: "100%",
-            },
-            "#gatsby-focus-wrapper": {
-              display: "flex",
-              flexDirection: "column",
-              height: "100%",
-            },
-          }}
-        />
-        <CssBaseline enableColorScheme />
-        {children}
-      </CssVarsProvider>
-    </EmotionThemeProvider>
-  );
+  return <CustomThemeProvider>{children}</CustomThemeProvider>;
 };

src/layouts/themes/CustomThemeProvider.tsx

@@ -0,0 +1,56 @@
+import { ThemeProvider as EmotionThemeProvider, Global } from "@emotion/react";
+import CssBaseline from "@mui/material/CssBaseline";
+import { Experimental_CssVarsProvider as CssVarsProvider } from "@mui/material/styles/CssVarsProvider";
+
+import { useTheme, type CustomTheme } from "./useTheme";
+
+import type { ReactNode } from "react";
+
+import type {} from "@mui/material/themeCssVarsAugmentation";
+
+import { FONT_FAMILY } from "@/components/markdown/constants";
+
+declare module "@emotion/react" {
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  export interface Theme extends CustomTheme {}
+}
+
+interface CustomThemeProviderProps {
+  children: ReactNode;
+}
+
+export const CustomThemeProvider = ({
+  children,
+}: CustomThemeProviderProps): JSX.Element => {
+  const theme = useTheme();
+
+  return (
+    <EmotionThemeProvider theme={theme}>
+      <CssVarsProvider defaultMode="system" theme={theme}>
+        <Global
+          styles={{
+            html: {
+              height: "100%",
+            },
+            body: {
+              height: "100%",
+              cursor: "default",
+              fontFamily: FONT_FAMILY,
+              overflowWrap: "break-word",
+            },
+            "#___gatsby": {
+              height: "100%",
+            },
+            "#gatsby-focus-wrapper": {
+              display: "flex",
+              flexDirection: "column",
+              height: "100%",
+            },
+          }}
+        />
+        <CssBaseline enableColorScheme />
+        {children}
+      </CssVarsProvider>
+    </EmotionThemeProvider>
+  );
+};

src/layouts/themes/M3Components.ts

@@ -27,7 +27,7 @@ SOFTWARE.
 
 import type { Components, Theme } from "@mui/material/styles";
 
-export const components: Components<Omit<Theme, "palette">> = {
+export const m3Components: Components<Omit<Theme, "palette">> = {
   MuiCssBaseline: {
     defaultProps: {
       enableColorScheme: true,
@@ -292,7 +292,7 @@ export const components: Components<Omit<Theme, "palette">> = {
     styleOverrides: {
       root: {
         borderRadius: "20px",
-        padding: "10px 8px",
+        // padding: "10px 8px",
       },
     },
     variants: [

src/layouts/themes/index.ts

@@ -0,0 +1 @@
+export * from "./CustomThemeProvider";

src/layouts/themes/useTheme.ts

@@ -1,22 +1,19 @@
-import { createTheme } from "@mui/material/styles";
 import createExtendTheme from "@mui/material/styles/experimental_extendTheme";
 import { useMemo } from "react";
 
-import { components } from "./M3Components";
+import { m3Components } from "./M3Components";
 import { getDesignTokens } from "./M3Theme";
 import { darkColorTokens, lightColorTokens, tones } from "./defaultColorTokens";
 
 import type { CssVarsTheme, Theme } from "@mui/material/styles";
 
 import { FONT_FAMILY } from "@/components/markdown/constants";
 
-export const useTheme = (): Omit<Theme, "palette"> & CssVarsTheme => {
-  const lightTheme = createTheme(
-    getDesignTokens("light", lightColorTokens, tones)
-  );
-  const darkTheme = createTheme(
-    getDesignTokens("dark", darkColorTokens, tones)
-  );
+export type CustomTheme = Omit<Theme, "palette"> & CssVarsTheme;
+
+export const useTheme = (): CustomTheme => {
+  const lightTheme = getDesignTokens("light", lightColorTokens, tones);
+  const darkTheme = getDesignTokens("dark", darkColorTokens, tones);
 
   const theme = useMemo(() => {
     return createExtendTheme({
@@ -35,82 +32,38 @@ export const useTheme = (): Omit<Theme, "palette"> & CssVarsTheme => {
         borderRadius: 8, // defaultTheme.spacing(1)
       },
       components: {
-        ...components,
-        //   MuiButton: {
-        //     styleOverrides: {
-        //       root: {
-        //         borderRadius: "50px",
-        //         textTransform: "none",
-        //         fontWeight: "bold",
-        //       },
-        //       sizeSmall: {
-        //         padding: defaultTheme.spacing(0.5, 1.5),
-        //       },
-        //     },
-        //   },
-        //   MuiButtonBase: {
-        //     styleOverrides: {
-        //       root: {
-        //         userSelect: "auto",
-        //       },
-        //     },
-        //   },
-        //   MuiChip: {
-        //     styleOverrides: {
-        //       root: {
-        //         marginRight: defaultTheme.spacing(0.5),
-        //         marginTop: defaultTheme.spacing(0.5),
-        //       },
-        //     },
-        //   },
-        //   MuiLinearProgress: {
-        //     styleOverrides: {
-        //       root: {
-        //         height: defaultTheme.spacing(0.5),
-        //       },
-        //     },
-        //   },
-        //   MuiLink: {
-        //     defaultProps: {
-        //       color: "inherit",
-        //     },
-        //   },
-        //   MuiPaper: {
-        //     styleOverrides: {
-        //       rounded: {
-        //         borderRadius: defaultTheme.spacing(1.5),
-        //       },
-        //     },
-        //   },
-        //   MuiAccordion: {
-        //     styleOverrides: {
-        //       rounded: {
-        //         "&:before": {
-        //           display: "none",
-        //         },
-        //         "&:not(:last-of-type)": {
-        //           borderBottom: `1px solid ${defaultTheme.palette.divider}`,
-        //         },
-        //         "&:first-of-type": {
-        //           borderTopLeftRadius: defaultTheme.spacing(1.5),
-        //           borderTopRightRadius: defaultTheme.spacing(1.5),
-        //         },
-        //         "&:last-of-type": {
-        //           borderBottomLeftRadius: defaultTheme.spacing(1.5),
-        //           borderBottomRightRadius: defaultTheme.spacing(1.5),
-        //         },
-        //       },
-        //     },
-        //   },
-        //   MuiToggleButton: {
-        //     styleOverrides: {
-        //       root: {
-        //         borderRadius: "50px",
-        //         textTransform: "none",
-        //         fontWeight: "bold",
-        //       },
-        //     },
-        //   },
+        ...m3Components,
+        MuiButtonBase: {
+          ...m3Components?.MuiButtonBase,
+          styleOverrides: {
+            ...m3Components?.MuiButtonBase?.styleOverrides,
+            root: {
+              userSelect: "auto",
+            },
+          },
+        },
+        MuiAccordion: {
+          ...m3Components.MuiAccordion,
+          styleOverrides: {
+            ...m3Components.MuiAccordion?.styleOverrides,
+            rounded: ({ theme }) => ({
+              "&:before": {
+                display: "none",
+              },
+              "&:not(:last-of-type)": {
+                borderBottom: `1px solid ${theme.vars.palette.divider}`,
+              },
+              "&:first-of-type": {
+                borderTopLeftRadius: theme.spacing(2.5),
+                borderTopRightRadius: theme.spacing(2.5),
+              },
+              "&:last-of-type": {
+                borderBottomLeftRadius: theme.spacing(2.5),
+                borderBottomRightRadius: theme.spacing(2.5),
+              },
+            }),
+          },
+        },
       },
     });
   }, [darkTheme.palette, lightTheme.palette]);