From 7ec26714e56220325ffba420c85509ee462fd539 Mon Sep 17 00:00:00 2001 From: Mathieu Marques Date: Sat, 19 Feb 2022 20:24:08 +0100 Subject: [PATCH] refactor(theme): use a base theme to overwrite --- package.json | 6 +- src/components/Article/Article.test.tsx | 4 + src/components/Decklist/Decklist.styles.ts | 4 +- .../renderers/RemarkAccordion.styles.ts | 4 +- .../Remark/renderers/RemarkCode.styles.ts | 8 +- .../Remark/renderers/RemarkImage.styles.ts | 2 +- .../Remark/renderers/RemarkQuote.styles.ts | 5 +- .../Remark/renderers/RemarkRow.styles.ts | 4 +- .../renderers/RemarkSoundcloud.styles.ts | 2 +- .../Remark/renderers/RemarkTable.styles.ts | 4 +- .../Remark/renderers/RemarkYoutube.styles.ts | 2 +- src/pages/_app.tsx | 7 +- src/pages/_document.jsx | 2 +- src/theme/ThemeContext.tsx | 6 +- src/theme/theme.ts | 236 ++++++++---------- src/theme/tools/barf.ts | 13 + src/theme/tools/gutters.ts | 13 + yarn.lock | 47 ++-- 18 files changed, 188 insertions(+), 181 deletions(-) create mode 100644 src/theme/tools/barf.ts create mode 100644 src/theme/tools/gutters.ts diff --git a/package.json b/package.json index 17d8895a..f05b7b02 100644 --- a/package.json +++ b/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", diff --git a/src/components/Article/Article.test.tsx b/src/components/Article/Article.test.tsx index 2bd9081a..c0520afb 100644 --- a/src/components/Article/Article.test.tsx +++ b/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', () => { diff --git a/src/components/Decklist/Decklist.styles.ts b/src/components/Decklist/Decklist.styles.ts index f8c3f44a..e8bb7bcf 100644 --- a/src/components/Decklist/Decklist.styles.ts +++ b/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, diff --git a/src/components/Remark/renderers/RemarkAccordion.styles.ts b/src/components/Remark/renderers/RemarkAccordion.styles.ts index e348d09a..62bf0e7a 100644 --- a/src/components/Remark/renderers/RemarkAccordion.styles.ts +++ b/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, diff --git a/src/components/Remark/renderers/RemarkCode.styles.ts b/src/components/Remark/renderers/RemarkCode.styles.ts index 75d724a7..166f67bd 100644 --- a/src/components/Remark/renderers/RemarkCode.styles.ts +++ b/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', }, }) diff --git a/src/components/Remark/renderers/RemarkImage.styles.ts b/src/components/Remark/renderers/RemarkImage.styles.ts index e1e2df5a..4c6427a5 100644 --- a/src/components/Remark/renderers/RemarkImage.styles.ts +++ b/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', diff --git a/src/components/Remark/renderers/RemarkQuote.styles.ts b/src/components/Remark/renderers/RemarkQuote.styles.ts index 7cc78d76..537de492 100644 --- a/src/components/Remark/renderers/RemarkQuote.styles.ts +++ b/src/components/Remark/renderers/RemarkQuote.styles.ts @@ -9,10 +9,9 @@ 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%', @@ -20,11 +19,9 @@ export const useStyles = makeStyles((theme: Theme) => position: 'absolute', width: 4, }, - '& > :first-child': { paddingTop: theme.spacing(), }, - '& > :last-child': { paddingBottom: theme.spacing(), }, diff --git a/src/components/Remark/renderers/RemarkRow.styles.ts b/src/components/Remark/renderers/RemarkRow.styles.ts index 47822513..5aa75b0c 100644 --- a/src/components/Remark/renderers/RemarkRow.styles.ts +++ b/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, }) ); diff --git a/src/components/Remark/renderers/RemarkSoundcloud.styles.ts b/src/components/Remark/renderers/RemarkSoundcloud.styles.ts index 50453cf6..623eda9b 100644 --- a/src/components/Remark/renderers/RemarkSoundcloud.styles.ts +++ b/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%', }, diff --git a/src/components/Remark/renderers/RemarkTable.styles.ts b/src/components/Remark/renderers/RemarkTable.styles.ts index 455f4b49..231c93a8 100644 --- a/src/components/Remark/renderers/RemarkTable.styles.ts +++ b/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, diff --git a/src/components/Remark/renderers/RemarkYoutube.styles.ts b/src/components/Remark/renderers/RemarkYoutube.styles.ts index 95885a2e..42ffa1c7 100644 --- a/src/components/Remark/renderers/RemarkYoutube.styles.ts +++ b/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', diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 0a9baa92..7256422e 100644 --- a/src/pages/_app.tsx +++ b/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 => ( <> diff --git a/src/pages/_document.jsx b/src/pages/_document.jsx index 219677e2..e9775b39 100644 --- a/src/pages/_document.jsx +++ b/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) { diff --git a/src/theme/ThemeContext.tsx b/src/theme/ThemeContext.tsx index 0ff52ca9..d8f2d094 100644 --- a/src/theme/ThemeContext.tsx +++ b/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 = ({ children }) => { return ( - - {children} + + {children} ); diff --git a/src/theme/theme.ts b/src/theme/theme.ts index 9d5413ce..084cf7b8 100644 --- a/src/theme/theme.ts +++ b/src/theme/theme.ts @@ -1,6 +1,12 @@ +import { + deepPurple as primary, + grey, + pink as secondary, +} from '@mui/material/colors'; import { Theme, ThemeOptions, alpha, createTheme } from '@mui/material/styles'; -import { deepPurple as primary, pink as secondary } from '@mui/material/colors'; import '@fontsource/libre-baskerville'; +import { barf } from '@/theme/tools/barf'; +import { gutters } from '@/theme/tools/gutters'; interface DrawerOptions { width: number; @@ -18,166 +24,132 @@ declare module '@mui/material/styles' { declare module '@mui/material/styles/createMixins' { interface Mixins { - barf: () => CSSProperties; - gutters: () => CSSProperties; + barf: CSSProperties; + gutters: CSSProperties; } } -const base: Theme = createTheme({ - palette: { primary, secondary }, -} as ThemeOptions); - -const gutters = () => ({ - paddingLeft: base.spacing(3), - paddingRight: base.spacing(3), - [base.breakpoints.only('xs')]: { - paddingLeft: base.spacing(2), - paddingRight: base.spacing(2), - }, -}); - -const barf = () => ({ - marginLeft: base.spacing(-3), - marginRight: base.spacing(-3), - [base.breakpoints.only('xs')]: { - marginLeft: base.spacing(-2), - marginRight: base.spacing(-2), - }, -}); +declare module '@mui/styles' { + // eslint-disable-next-line @typescript-eslint/no-empty-interface + interface DefaultTheme extends Theme {} +} -const options: ThemeOptions = { - components: { - MuiAccordion: { - styleOverrides: { - root: { backgroundColor: 'transparent' }, - }, - }, - MuiAccordionSummary: { - styleOverrides: { - root: { '&:hover': { backgroundColor: base.palette.action.hover } }, - }, - }, - MuiButton: { - styleOverrides: { - root: { borderRadius: base.spacing() }, +export const base: (theme: Theme) => Theme = (theme) => { + const { breakpoints, palette, spacing, typography } = theme; + const { mode } = palette; + return createTheme({ + components: { + MuiAccordion: { + styleOverrides: { + root: { backgroundColor: 'transparent' }, + }, }, - }, - MuiCardContent: { - styleOverrides: { - root: { - padding: base.spacing(3), - ...gutters(), + MuiAccordionSummary: { + styleOverrides: { + root: { '&:hover': { backgroundColor: palette.action.hover } }, }, }, - }, - MuiContainer: { - styleOverrides: { - root: { - [base.breakpoints.only('xs')]: { - paddingLeft: 0, - paddingRight: 0, + MuiCardContent: { + styleOverrides: { + root: { + padding: spacing(3), + ...gutters(theme), }, }, }, - }, - MuiCssBaseline: { - styleOverrides: { - '@global': { - em: { - fontFamily: 'Libre Baskerville, serif', - fontSize: '0.9em', - fontStyle: 'italic', + MuiContainer: { + styleOverrides: { + root: { + [breakpoints.only('xs')]: { + paddingLeft: 0, + paddingRight: 0, + }, }, }, }, - }, - MuiPaper: { - styleOverrides: { - rounded: { - borderRadius: base.spacing(2), - [base.breakpoints.only('xs')]: { borderRadius: 0 }, + MuiCssBaseline: { + styleOverrides: { + '@global': { + em: { + fontFamily: 'Libre Baskerville, serif', + fontSize: '0.9em', + fontStyle: 'italic', + }, + }, }, }, - }, - MuiTypography: { - styleOverrides: { - gutterBottom: { - // NOTE Increase specificity - '&&': { marginBottom: '.6em', marginTop: '.6em' }, - }, - h1: { - marginBottom: '.8em', - [base.breakpoints.down('sm')]: { - fontSize: base.typography.pxToRem(44), + MuiLink: { + styleOverrides: { + root: { + color: palette.secondary[mode === 'dark' ? 'light' : 'dark'], + textDecorationColor: alpha(palette.secondary.main, 0.5), }, }, - h2: { - [base.breakpoints.down('sm')]: { - fontSize: base.typography.pxToRem(40), + }, + MuiPaper: { + styleOverrides: { + rounded: { + borderRadius: 16, + [breakpoints.only('xs')]: { borderRadius: 0 }, }, }, - h3: { - [base.breakpoints.down('sm')]: { - fontSize: base.typography.pxToRem(36), + }, + MuiTypography: { + styleOverrides: { + gutterBottom: { + // NOTE Increase specificity + '&&': { marginBottom: '.6em', marginTop: '.6em' }, + }, + h1: { + marginBottom: '.8em', + [breakpoints.down('sm')]: { + fontSize: typography.pxToRem(44), + }, + }, + h2: { + [breakpoints.down('sm')]: { + fontSize: typography.pxToRem(40), + }, }, + h3: { + [breakpoints.down('sm')]: { + fontSize: typography.pxToRem(36), + }, + }, + paragraph: { '&:last-child': { marginBottom: 0 } }, }, - paragraph: { '&:last-child': { marginBottom: 0 } }, }, }, - }, - drawer: { width: 320 }, - mixins: { barf, gutters }, - palette: { primary, secondary }, - typography: { - fontSize: 16, - h1: { fontSize: base.typography.pxToRem(64) }, - h2: { fontSize: base.typography.pxToRem(48) }, - h3: { fontSize: base.typography.pxToRem(38) }, - h4: { fontSize: base.typography.pxToRem(32) }, - h5: { fontSize: base.typography.pxToRem(26) }, - h6: { fontSize: base.typography.pxToRem(22) }, - }, + drawer: { width: 310 }, + mixins: { barf: barf(theme), gutters: gutters(theme) }, + palette, + shape: { borderRadius: 8 }, + typography: { + fontSize: 16, + h1: { fontSize: typography.pxToRem(64) }, + h2: { fontSize: typography.pxToRem(48) }, + h3: { fontSize: typography.pxToRem(38) }, + h4: { fontSize: typography.pxToRem(32) }, + h5: { fontSize: typography.pxToRem(26) }, + h6: { fontSize: typography.pxToRem(22) }, + }, + }); }; -export const darkTheme: Theme = createTheme({ - ...options, - components: { - ...options.components, - MuiLink: { - styleOverrides: { - root: { - color: base.palette.secondary.light, - textDecorationColor: alpha(base.palette.secondary.main, 0.5), - }, - }, - }, - }, +export const dark: Theme = createTheme({ palette: { - ...options.palette, - background: { - default: '#121212', - paper: base.palette.grey[900], - }, + background: { default: '#121212', paper: grey[900] }, mode: 'dark', + primary, + secondary, }, -}); +} as ThemeOptions); -export const lightTheme: Theme = createTheme({ - ...options, - components: { - ...options.components, - MuiLink: { - styleOverrides: { - root: { - color: base.palette.secondary.dark, - textDecorationColor: alpha(base.palette.secondary.main, 0.5), - }, - }, - }, - }, +export const light: Theme = createTheme({ palette: { - ...options.palette, - background: { default: base.palette.grey[100] }, + background: { default: grey[100] }, mode: 'light', + primary, + secondary, }, -}); +} as ThemeOptions); diff --git a/src/theme/tools/barf.ts b/src/theme/tools/barf.ts new file mode 100644 index 00000000..3cf68bb3 --- /dev/null +++ b/src/theme/tools/barf.ts @@ -0,0 +1,13 @@ +import type { Theme } from '@mui/material/styles'; +import type { CSSProperties } from '@mui/material/styles/createMixins'; + +type Barf = (theme: Theme) => CSSProperties; + +export const barf: Barf = (theme) => ({ + marginLeft: theme.spacing(-3), + marginRight: theme.spacing(-3), + [theme.breakpoints.only('xs')]: { + marginLeft: theme.spacing(-2), + marginRight: theme.spacing(-2), + }, +}); diff --git a/src/theme/tools/gutters.ts b/src/theme/tools/gutters.ts new file mode 100644 index 00000000..29696148 --- /dev/null +++ b/src/theme/tools/gutters.ts @@ -0,0 +1,13 @@ +import type { Theme } from '@mui/material/styles'; +import type { CSSProperties } from '@mui/material/styles/createMixins'; + +type Gutters = (theme: Theme) => CSSProperties; + +export const gutters: Gutters = (theme) => ({ + paddingLeft: theme.spacing(3), + paddingRight: theme.spacing(3), + [theme.breakpoints.only('xs')]: { + paddingLeft: theme.spacing(2), + paddingRight: theme.spacing(2), + }, +}); diff --git a/yarn.lock b/yarn.lock index 4680287d..61d0bc8c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -367,7 +367,7 @@ resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39" integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw== -"@emotion/babel-plugin@^11.3.0": +"@emotion/babel-plugin@^11.7.1": version "11.7.2" resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.7.2.tgz#fec75f38a6ab5b304b0601c74e2a5e77c95e5fa0" integrity sha512-6mGSCWi9UzXut/ZAN6lGFu33wGR3SJisNl3c0tvlmb8XChH1b2SUvxvnOh7hvLpqyRdHHU9AiazV3Cwbk5SXKQ== @@ -408,21 +408,29 @@ dependencies: "@emotion/memoize" "^0.7.4" +"@emotion/is-prop-valid@^1.1.2": + version "1.1.2" + resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.1.2.tgz#34ad6e98e871aa6f7a20469b602911b8b11b3a95" + integrity sha512-3QnhqeL+WW88YjYbQL5gUIkthuMw7a0NGbZ7wfFVk2kg/CK5w8w5FFa0RzWjyY1+sujN0NWbtSHH6OJmWHtJpQ== + dependencies: + "@emotion/memoize" "^0.7.4" + "@emotion/memoize@^0.7.4", "@emotion/memoize@^0.7.5": version "0.7.5" resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.5.tgz#2c40f81449a4e554e9fc6396910ed4843ec2be50" integrity sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ== -"@emotion/react@^11.7.1": - version "11.7.1" - resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.7.1.tgz#3f800ce9b20317c13e77b8489ac4a0b922b2fe07" - integrity sha512-DV2Xe3yhkF1yT4uAUoJcYL1AmrnO5SVsdfvu+fBuS7IbByDeTVx9+wFmvx9Idzv7/78+9Mgx2Hcmr7Fex3tIyw== +"@emotion/react@^11.8.1": + version "11.8.1" + resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.8.1.tgz#5358b8c78367063881e26423057c030c57ce52eb" + integrity sha512-XGaie4nRxmtP1BZYBXqC5JGqMYF2KRKKI7vjqNvQxyRpekVAZhb6QqrElmZCAYXH1L90lAelADSVZC4PFsrJ8Q== dependencies: "@babel/runtime" "^7.13.10" + "@emotion/babel-plugin" "^11.7.1" "@emotion/cache" "^11.7.1" "@emotion/serialize" "^1.0.2" "@emotion/sheet" "^1.1.0" - "@emotion/utils" "^1.0.0" + "@emotion/utils" "^1.1.0" "@emotion/weak-memoize" "^0.2.5" hoist-non-react-statics "^3.3.1" @@ -442,16 +450,16 @@ resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.1.0.tgz#56d99c41f0a1cda2726a05aa6a20afd4c63e58d2" integrity sha512-u0AX4aSo25sMAygCuQTzS+HsImZFuS8llY8O7b9MDRzbJM0kVJlAz6KNDqcG7pOuQZJmj/8X/rAW+66kMnMW+g== -"@emotion/styled@^11.6.0": - version "11.6.0" - resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-11.6.0.tgz#9230d1a7bcb2ebf83c6a579f4c80e0664132d81d" - integrity sha512-mxVtVyIOTmCAkFbwIp+nCjTXJNgcz4VWkOYQro87jE2QBTydnkiYusMrRGFtzuruiGK4dDaNORk4gH049iiQuw== +"@emotion/styled@^11.8.1": + version "11.8.1" + resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-11.8.1.tgz#856f6f63aceef0eb783985fa2322e2bf66d04e17" + integrity sha512-OghEVAYBZMpEquHZwuelXcRjRJQOVayvbmNR0zr174NHdmMgrNkLC6TljKC5h9lZLkN5WGrdUcrKlOJ4phhoTQ== dependencies: "@babel/runtime" "^7.13.10" - "@emotion/babel-plugin" "^11.3.0" - "@emotion/is-prop-valid" "^1.1.1" + "@emotion/babel-plugin" "^11.7.1" + "@emotion/is-prop-valid" "^1.1.2" "@emotion/serialize" "^1.0.2" - "@emotion/utils" "^1.0.0" + "@emotion/utils" "^1.1.0" "@emotion/unitless@^0.7.5": version "0.7.5" @@ -463,6 +471,11 @@ resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.0.0.tgz#abe06a83160b10570816c913990245813a2fd6af" integrity sha512-mQC2b3XLDs6QCW+pDQDiyO/EdGZYOygE8s5N5rrzjSI4M3IejPE/JPndCBwRT9z982aqQNi6beWs1UeayrQxxA== +"@emotion/utils@^1.1.0": + version "1.1.0" + resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.1.0.tgz#86b0b297f3f1a0f2bdb08eeac9a2f49afd40d0cf" + integrity sha512-iRLa/Y4Rs5H/f2nimczYmS5kFJEbpiVvgN3XVfZ022IYhuNA1IRSHEizcof88LtCTXtl9S2Cxt32KgaXEu72JQ== + "@emotion/weak-memoize@^0.2.5": version "0.2.5" resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz#8eed982e2ee6f7f4e44c253e12962980791efd46" @@ -2172,10 +2185,10 @@ eslint-config-airbnb@^19.0.4: object.assign "^4.1.2" object.entries "^1.1.5" -eslint-config-prettier@^8.3.0: - version "8.3.0" - resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-8.3.0.tgz#f7471b20b6fe8a9a9254cc684454202886a2dd7a" - integrity sha512-BgZuLUSeKzvlL/VUjx/Yb787VQ26RU3gGjA3iiFvdsp/2bMfVIWUVP7tjxtjS0e+HP409cPlPvNkQloz8C91ew== +eslint-config-prettier@^8.4.0: + version "8.4.0" + resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-8.4.0.tgz#8e6d17c7436649e98c4c2189868562921ef563de" + integrity sha512-CFotdUcMY18nGRo5KGsnNxpznzhkopOcOo0InID+sgQssPrzjvsyKZPvOgymTFeHrFuC3Tzdf2YndhXtULK9Iw== eslint-import-resolver-node@^0.3.6: version "0.3.6"