From b40c2038c9a7b338f66a88622122c6bc1b68e06c Mon Sep 17 00:00:00 2001 From: Takanori Oishi Date: Sat, 17 Jun 2023 20:50:12 +0900 Subject: [PATCH] fix --- src/layouts/WrapRootElement.tsx | 40 +------ src/layouts/themes/CustomThemeProvider.tsx | 56 ++++++++++ src/layouts/themes/M3Components.ts | 4 +- src/layouts/themes/index.ts | 1 + src/layouts/themes/useTheme.ts | 123 +++++++-------------- src/types/emotion.d.ts | 10 -- 6 files changed, 99 insertions(+), 135 deletions(-) create mode 100644 src/layouts/themes/CustomThemeProvider.tsx create mode 100644 src/layouts/themes/index.ts delete mode 100644 src/types/emotion.d.ts diff --git a/src/layouts/WrapRootElement.tsx b/src/layouts/WrapRootElement.tsx index 77575021..c429d36f 100644 --- a/src/layouts/WrapRootElement.tsx +++ b/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 ( - - - - - {children} - - - ); + return {children}; }; diff --git a/src/layouts/themes/CustomThemeProvider.tsx b/src/layouts/themes/CustomThemeProvider.tsx new file mode 100644 index 00000000..e05f9485 --- /dev/null +++ b/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 ( + + + + + {children} + + + ); +}; diff --git a/src/layouts/themes/M3Components.ts b/src/layouts/themes/M3Components.ts index 744e3b33..71041d8a 100644 --- a/src/layouts/themes/M3Components.ts +++ b/src/layouts/themes/M3Components.ts @@ -27,7 +27,7 @@ SOFTWARE. import type { Components, Theme } from "@mui/material/styles"; -export const components: Components> = { +export const m3Components: Components> = { MuiCssBaseline: { defaultProps: { enableColorScheme: true, @@ -292,7 +292,7 @@ export const components: Components> = { styleOverrides: { root: { borderRadius: "20px", - padding: "10px 8px", + // padding: "10px 8px", }, }, variants: [ diff --git a/src/layouts/themes/index.ts b/src/layouts/themes/index.ts new file mode 100644 index 00000000..6ffe0ab6 --- /dev/null +++ b/src/layouts/themes/index.ts @@ -0,0 +1 @@ +export * from "./CustomThemeProvider"; diff --git a/src/layouts/themes/useTheme.ts b/src/layouts/themes/useTheme.ts index 4dd6f00a..6ec9126e 100644 --- a/src/layouts/themes/useTheme.ts +++ b/src/layouts/themes/useTheme.ts @@ -1,8 +1,7 @@ -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"; @@ -10,13 +9,11 @@ import type { CssVarsTheme, Theme } from "@mui/material/styles"; import { FONT_FAMILY } from "@/components/markdown/constants"; -export const useTheme = (): Omit & CssVarsTheme => { - const lightTheme = createTheme( - getDesignTokens("light", lightColorTokens, tones) - ); - const darkTheme = createTheme( - getDesignTokens("dark", darkColorTokens, tones) - ); +export type CustomTheme = Omit & 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 & 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]); diff --git a/src/types/emotion.d.ts b/src/types/emotion.d.ts deleted file mode 100644 index 6036f066..00000000 --- a/src/types/emotion.d.ts +++ /dev/null @@ -1,10 +0,0 @@ -import type { Theme as MuiTheme } from "@mui/material/styles"; - -// mui -import type {} from "@mui/material/themeCssVarsAugmentation"; - -// emotion -declare module "@emotion/react" { - // eslint-disable-next-line @typescript-eslint/no-empty-interface - export interface Theme extends MuiTheme {} -}