refactor(theme): use a base theme to overwrite

package.json

@@ -17,8 +17,8 @@
     "test:watch": "yarn test --verbose --watchAll"
   },
   "dependencies": {
-    "@emotion/react": "^11.7.1",
-    "@emotion/styled": "^11.6.0",
+    "@emotion/react": "^11.8.1",
+    "@emotion/styled": "^11.8.1",
     "@fontsource/libre-baskerville": "^4.5.1",
     "@mdi/js": "^6.5.95",
     "@mdi/react": "^1.5.0",
@@ -56,7 +56,7 @@
     "babel-jest": "^27.5.1",
     "eslint": "^8.9.0",
     "eslint-config-airbnb": "^19.0.4",
-    "eslint-config-prettier": "^8.3.0",
+    "eslint-config-prettier": "^8.4.0",
     "eslint-import-resolver-typescript": "^2.5.0",
     "eslint-plugin-import": "^2.25.4",
     "eslint-plugin-jsx-a11y": "^6.5.1",

src/components/Article/Article.test.tsx

@@ -1,12 +1,16 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { Article, Props } from '@/components/Article/Article';
+import { useStyles } from '@/components/Article/Article.styles';
+
+jest.mock('@/components/Article/Article.styles');
 
 describe(Article.name, () => {
   let props: Props;
 
   beforeEach(() => {
     props = { route: '/path/to/article' };
+    (useStyles as jest.Mock).mockReturnValueOnce({});
   });
 
   it('should render the title if provided', () => {

src/components/Decklist/Decklist.styles.ts

@@ -16,10 +16,10 @@ export const useStyles = makeStyles((theme: Theme) =>
       paddingTop: theme.spacing(2),
     },
 
-    gutters: theme.mixins.gutters(),
+    gutters: theme.mixins.gutters,
 
     root: {
-      ...theme.mixins.barf(),
+      ...theme.mixins.barf,
       borderBottomWidth: 1,
       borderColor: theme.palette.divider,
       borderLeftWidth: 0,

src/components/Remark/renderers/RemarkAccordion.styles.ts

@@ -11,9 +11,9 @@ export const useStyles = makeStyles((theme: Theme) =>
       paddingBottom: theme.spacing(2),
       paddingTop: theme.spacing(2),
     },
-    gutters: theme.mixins.gutters(),
+    gutters: theme.mixins.gutters,
     root: {
-      ...theme.mixins.barf(),
+      ...theme.mixins.barf,
       borderBottomWidth: 1,
       borderColor: theme.palette.divider,
       borderLeftWidth: 0,

src/components/Remark/renderers/RemarkCode.styles.ts

@@ -4,15 +4,15 @@ import { createStyles, makeStyles } from '@mui/styles';
 export const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     block: {
-      ...theme.mixins.gutters(),
+      ...theme.mixins.gutters,
       fontFamily: 'monospace',
-      fontSize: '0.9em',
+      fontSize: '0.8em',
       margin: 0,
       padding: theme.spacing(),
     },
     inline: {
       backgroundColor: alpha(theme.palette.primary.light, 0.1),
-      borderRadius: theme.shape.borderRadius,
+      borderRadius: 4,
       borderStyle: 'hidden',
       color: theme.palette.text.secondary,
       fontFamily: 'monospace',
@@ -21,7 +21,7 @@ export const useStyles = makeStyles((theme: Theme) =>
       paddingRight: theme.spacing(0.5),
     },
     root: {
-      ...theme.mixins.barf(),
+      ...theme.mixins.barf,
       display: 'block',
     },
   })

src/components/Remark/renderers/RemarkImage.styles.ts

@@ -13,7 +13,7 @@ export const useStyles = makeStyles((theme: Theme) =>
       width: '100%',
     },
     root: {
-      ...theme.mixins.barf(),
+      ...theme.mixins.barf,
       borderColor: theme.palette.divider,
       borderBottomStyle: 'solid',
       borderTopStyle: 'solid',

src/components/Remark/renderers/RemarkQuote.styles.ts

@@ -9,22 +9,19 @@ export const useStyles = makeStyles((theme: Theme) =>
       margin: 0,
       paddingLeft: theme.spacing(2),
       position: 'relative',
-
       '&:before': {
         backgroundColor: theme.palette.secondary.main,
-        borderRadius: theme.shape.borderRadius,
+        borderRadius: 4,
         content: '""',
         display: 'block',
         height: '100%',
         left: 0,
         position: 'absolute',
         width: 4,
       },
-
       '& > :first-child': {
         paddingTop: theme.spacing(),
       },
-
       '& > :last-child': {
         paddingBottom: theme.spacing(),
       },

src/components/Remark/renderers/RemarkRow.styles.ts

@@ -13,7 +13,7 @@ export const useStyles = makeStyles((theme: Theme) =>
     },
 
     centered: {
-      ...theme.mixins.gutters(),
+      ...theme.mixins.gutters,
       justifyContent: 'space-around',
       marginLeft: theme.spacing(-1),
       marginRight: theme.spacing(-1),
@@ -46,6 +46,6 @@ export const useStyles = makeStyles((theme: Theme) =>
       },
     },
 
-    root: theme.mixins.barf(),
+    root: theme.mixins.barf,
   })
 );

src/components/Remark/renderers/RemarkSoundcloud.styles.ts

@@ -5,7 +5,7 @@ export const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     root: {
       border: 'none',
-      borderRadius: theme.shape.borderRadius * 2,
+      borderRadius: theme.shape.borderRadius,
       display: 'block',
       width: '100%',
     },

src/components/Remark/renderers/RemarkTable.styles.ts

@@ -3,14 +3,14 @@ import { createStyles, makeStyles } from '@mui/styles';
 
 export const useStyles = makeStyles((theme: Theme) =>
   createStyles({
-    cell: theme.mixins.gutters(),
+    cell: theme.mixins.gutters,
 
     head: {
       backgroundColor: alpha(theme.palette.primary.light, 0.1),
     },
 
     table: {
-      ...theme.mixins.barf(),
+      ...theme.mixins.barf,
       borderTopColor: theme.palette.divider,
       borderTopStyle: 'solid',
       borderTopWidth: 1,

src/components/Remark/renderers/RemarkYoutube.styles.ts

@@ -21,7 +21,7 @@ export const useStyles = makeStyles((theme: Theme) =>
       width: '100%',
     },
     root: {
-      ...theme.mixins.barf(),
+      ...theme.mixins.barf,
       borderColor: theme.palette.divider,
       borderBottomStyle: 'solid',
       borderTopStyle: 'solid',

src/pages/_app.tsx

@@ -2,14 +2,9 @@ import type { AppProps } from 'next/app';
 import Head from 'next/head';
 import React from 'react';
 import CssBaseline from '@mui/material/CssBaseline';
-import { Theme, StyledEngineProvider } from '@mui/material/styles';
+import { StyledEngineProvider } from '@mui/material/styles';
 import { ThemeProvider } from '@/theme/ThemeContext';
 
-declare module '@mui/styles/defaultTheme' {
-  // eslint-disable-next-line @typescript-eslint/no-empty-interface
-  interface DefaultTheme extends Theme {}
-}
-
 const Application = ({ Component, pageProps }: AppProps): JSX.Element => (
   <>
     <Head>

src/pages/_document.jsx

@@ -1,7 +1,7 @@
 import React, { Children } from 'react';
 import NextDocument, { Head, Html, Main, NextScript } from 'next/document';
 import { ServerStyleSheets } from '@mui/styles';
-import { darkTheme as theme } from '@/theme/theme';
+import { dark as theme } from '@/theme/theme';
 
 export default class Document extends NextDocument {
   static async getInitialProps(context) {

src/theme/ThemeContext.tsx

@@ -6,7 +6,7 @@ import React, {
   useState,
 } from 'react';
 import { ThemeProvider as MuiThemeProvider } from '@mui/material/styles';
-import { darkTheme, lightTheme } from '@/theme/theme';
+import { base, dark, light } from '@/theme/theme';
 
 type Toggle = () => void;
 
@@ -38,8 +38,8 @@ export const ThemeProvider: FunctionComponent<Props> = ({ children }) => {
 
   return (
     <ThemeContext.Provider value={value}>
-      <MuiThemeProvider theme={isDark ? darkTheme : lightTheme}>
-        {children}
+      <MuiThemeProvider theme={isDark ? dark : light}>
+        <MuiThemeProvider theme={base}>{children}</MuiThemeProvider>
       </MuiThemeProvider>
     </ThemeContext.Provider>
   );