From 2bbd80d40b93244bbaac4b6a131a46d771006c6f Mon Sep 17 00:00:00 2001 From: "Lim\\jun" Date: Wed, 31 Jan 2024 16:28:08 +0900 Subject: [PATCH] =?UTF-8?q?Dashboard=20=EC=A4=91=EA=B0=84=EC=A0=80?= =?UTF-8?q?=EC=9E=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/themes/index.js | 64 +++++++++++++ .../src/themes/overrides/Badge.js | 15 +++ .../src/themes/overrides/Button.js | 28 ++++++ .../src/themes/overrides/CardContent.js | 16 ++++ .../src/themes/overrides/Checkbox.js | 13 +++ .../src/themes/overrides/Chip.js | 40 ++++++++ .../src/themes/overrides/IconButton.js | 28 ++++++ .../src/themes/overrides/InputLabel.js | 25 +++++ .../src/themes/overrides/LinearProgress.js | 17 ++++ .../src/themes/overrides/Link.js | 11 +++ .../src/themes/overrides/ListItemIcon.js | 13 +++ .../src/themes/overrides/OutlinedInput.js | 47 ++++++++++ .../src/themes/overrides/Tab.js | 14 +++ .../src/themes/overrides/TableCell.js | 20 ++++ .../src/themes/overrides/Tabs.js | 13 +++ .../src/themes/overrides/Typography.js | 13 +++ .../src/themes/overrides/index.js | 41 +++++++++ .../src/themes/palette.js | 60 ++++++++++++ .../src/themes/shadows.js | 13 +++ .../src/themes/theme/index.js | 92 +++++++++++++++++++ .../src/themes/typography.js | 71 ++++++++++++++ 21 files changed, 654 insertions(+) create mode 100644 egovframe-template-simple-react-contribution/src/themes/index.js create mode 100644 egovframe-template-simple-react-contribution/src/themes/overrides/Badge.js create mode 100644 egovframe-template-simple-react-contribution/src/themes/overrides/Button.js create mode 100644 egovframe-template-simple-react-contribution/src/themes/overrides/CardContent.js create mode 100644 egovframe-template-simple-react-contribution/src/themes/overrides/Checkbox.js create mode 100644 egovframe-template-simple-react-contribution/src/themes/overrides/Chip.js create mode 100644 egovframe-template-simple-react-contribution/src/themes/overrides/IconButton.js create mode 100644 egovframe-template-simple-react-contribution/src/themes/overrides/InputLabel.js create mode 100644 egovframe-template-simple-react-contribution/src/themes/overrides/LinearProgress.js create mode 100644 egovframe-template-simple-react-contribution/src/themes/overrides/Link.js create mode 100644 egovframe-template-simple-react-contribution/src/themes/overrides/ListItemIcon.js create mode 100644 egovframe-template-simple-react-contribution/src/themes/overrides/OutlinedInput.js create mode 100644 egovframe-template-simple-react-contribution/src/themes/overrides/Tab.js create mode 100644 egovframe-template-simple-react-contribution/src/themes/overrides/TableCell.js create mode 100644 egovframe-template-simple-react-contribution/src/themes/overrides/Tabs.js create mode 100644 egovframe-template-simple-react-contribution/src/themes/overrides/Typography.js create mode 100644 egovframe-template-simple-react-contribution/src/themes/overrides/index.js create mode 100644 egovframe-template-simple-react-contribution/src/themes/palette.js create mode 100644 egovframe-template-simple-react-contribution/src/themes/shadows.js create mode 100644 egovframe-template-simple-react-contribution/src/themes/theme/index.js create mode 100644 egovframe-template-simple-react-contribution/src/themes/typography.js diff --git a/egovframe-template-simple-react-contribution/src/themes/index.js b/egovframe-template-simple-react-contribution/src/themes/index.js new file mode 100644 index 0000000..fc8ab03 --- /dev/null +++ b/egovframe-template-simple-react-contribution/src/themes/index.js @@ -0,0 +1,64 @@ +import PropTypes from 'prop-types'; +import { useMemo } from 'react'; + +// material-ui +import { CssBaseline, StyledEngineProvider } from '@mui/material'; +import { createTheme, ThemeProvider } from '@mui/material/styles'; + +// project import +import Palette from './palette'; +import Typography from './typography'; +import CustomShadows from './shadows'; +import componentsOverride from './overrides'; + +// ==============================|| DEFAULT THEME - MAIN ||============================== // + +export default function ThemeCustomization({ children }) { + const theme = Palette('light', 'default'); + + // eslint-disable-next-line react-hooks/exhaustive-deps + const themeTypography = Typography(`'Public Sans', sans-serif`); + const themeCustomShadows = useMemo(() => CustomShadows(theme), [theme]); + + const themeOptions = useMemo( + () => ({ + breakpoints: { + values: { + xs: 0, + sm: 768, + md: 1024, + lg: 1266, + xl: 1536 + } + }, + direction: 'ltr', + mixins: { + toolbar: { + minHeight: 60, + paddingTop: 8, + paddingBottom: 8 + } + }, + palette: theme.palette, + customShadows: themeCustomShadows, + typography: themeTypography + }), + [theme, themeTypography, themeCustomShadows] + ); + + const themes = createTheme(themeOptions); + themes.components = componentsOverride(themes); + + return ( + + + + {children} + + + ); +} + +ThemeCustomization.propTypes = { + children: PropTypes.node +}; diff --git a/egovframe-template-simple-react-contribution/src/themes/overrides/Badge.js b/egovframe-template-simple-react-contribution/src/themes/overrides/Badge.js new file mode 100644 index 0000000..89a0078 --- /dev/null +++ b/egovframe-template-simple-react-contribution/src/themes/overrides/Badge.js @@ -0,0 +1,15 @@ +// ==============================|| OVERRIDES - BADGE ||============================== // + +export default function Badge(theme) { + return { + MuiBadge: { + styleOverrides: { + standard: { + minWidth: theme.spacing(2), + height: theme.spacing(2), + padding: theme.spacing(0.5) + } + } + } + }; +} diff --git a/egovframe-template-simple-react-contribution/src/themes/overrides/Button.js b/egovframe-template-simple-react-contribution/src/themes/overrides/Button.js new file mode 100644 index 0000000..e601b31 --- /dev/null +++ b/egovframe-template-simple-react-contribution/src/themes/overrides/Button.js @@ -0,0 +1,28 @@ +// ==============================|| OVERRIDES - BUTTON ||============================== // + +export default function Button(theme) { + const disabledStyle = { + '&.Mui-disabled': { + backgroundColor: theme.palette.grey[200] + } + }; + + return { + MuiButton: { + defaultProps: { + disableElevation: true + }, + styleOverrides: { + root: { + fontWeight: 400 + }, + contained: { + ...disabledStyle + }, + outlined: { + ...disabledStyle + } + } + } + }; +} diff --git a/egovframe-template-simple-react-contribution/src/themes/overrides/CardContent.js b/egovframe-template-simple-react-contribution/src/themes/overrides/CardContent.js new file mode 100644 index 0000000..4a1f515 --- /dev/null +++ b/egovframe-template-simple-react-contribution/src/themes/overrides/CardContent.js @@ -0,0 +1,16 @@ +// ==============================|| OVERRIDES - CARD CONTENT ||============================== // + +export default function CardContent() { + return { + MuiCardContent: { + styleOverrides: { + root: { + padding: 20, + '&:last-child': { + paddingBottom: 20 + } + } + } + } + }; +} diff --git a/egovframe-template-simple-react-contribution/src/themes/overrides/Checkbox.js b/egovframe-template-simple-react-contribution/src/themes/overrides/Checkbox.js new file mode 100644 index 0000000..0bf2a99 --- /dev/null +++ b/egovframe-template-simple-react-contribution/src/themes/overrides/Checkbox.js @@ -0,0 +1,13 @@ +// ==============================|| OVERRIDES - CHECKBOX ||============================== // + +export default function Checkbox(theme) { + return { + MuiCheckbox: { + styleOverrides: { + root: { + color: theme.palette.secondary[300] + } + } + } + }; +} diff --git a/egovframe-template-simple-react-contribution/src/themes/overrides/Chip.js b/egovframe-template-simple-react-contribution/src/themes/overrides/Chip.js new file mode 100644 index 0000000..9d9a78c --- /dev/null +++ b/egovframe-template-simple-react-contribution/src/themes/overrides/Chip.js @@ -0,0 +1,40 @@ +// ==============================|| OVERRIDES - CHIP ||============================== // + +export default function Chip(theme) { + return { + MuiChip: { + styleOverrides: { + root: { + borderRadius: 4, + '&:active': { + boxShadow: 'none' + } + }, + sizeLarge: { + fontSize: '1rem', + height: 40 + }, + light: { + color: theme.palette.primary.main, + backgroundColor: theme.palette.primary.lighter, + borderColor: theme.palette.primary.light, + '&.MuiChip-lightError': { + color: theme.palette.error.main, + backgroundColor: theme.palette.error.lighter, + borderColor: theme.palette.error.light + }, + '&.MuiChip-lightSuccess': { + color: theme.palette.success.main, + backgroundColor: theme.palette.success.lighter, + borderColor: theme.palette.success.light + }, + '&.MuiChip-lightWarning': { + color: theme.palette.warning.main, + backgroundColor: theme.palette.warning.lighter, + borderColor: theme.palette.warning.light + } + } + } + } + }; +} diff --git a/egovframe-template-simple-react-contribution/src/themes/overrides/IconButton.js b/egovframe-template-simple-react-contribution/src/themes/overrides/IconButton.js new file mode 100644 index 0000000..a78af99 --- /dev/null +++ b/egovframe-template-simple-react-contribution/src/themes/overrides/IconButton.js @@ -0,0 +1,28 @@ +// ==============================|| OVERRIDES - ICON BUTTON ||============================== // + +export default function IconButton(theme) { + return { + MuiIconButton: { + styleOverrides: { + root: { + borderRadius: 4 + }, + sizeLarge: { + width: theme.spacing(5.5), + height: theme.spacing(5.5), + fontSize: '1.25rem' + }, + sizeMedium: { + width: theme.spacing(4.5), + height: theme.spacing(4.5), + fontSize: '1rem' + }, + sizeSmall: { + width: theme.spacing(3.75), + height: theme.spacing(3.75), + fontSize: '0.75rem' + } + } + } + }; +} diff --git a/egovframe-template-simple-react-contribution/src/themes/overrides/InputLabel.js b/egovframe-template-simple-react-contribution/src/themes/overrides/InputLabel.js new file mode 100644 index 0000000..7eec340 --- /dev/null +++ b/egovframe-template-simple-react-contribution/src/themes/overrides/InputLabel.js @@ -0,0 +1,25 @@ +// ==============================|| OVERRIDES - INPUT LABEL ||============================== // + +export default function InputLabel(theme) { + return { + MuiInputLabel: { + styleOverrides: { + root: { + color: theme.palette.grey[600] + }, + outlined: { + lineHeight: '0.8em', + '&.MuiInputLabel-sizeSmall': { + lineHeight: '1em' + }, + '&.MuiInputLabel-shrink': { + background: theme.palette.background.paper, + padding: '0 8px', + marginLeft: -6, + lineHeight: '1.4375em' + } + } + } + } + }; +} diff --git a/egovframe-template-simple-react-contribution/src/themes/overrides/LinearProgress.js b/egovframe-template-simple-react-contribution/src/themes/overrides/LinearProgress.js new file mode 100644 index 0000000..20cb67d --- /dev/null +++ b/egovframe-template-simple-react-contribution/src/themes/overrides/LinearProgress.js @@ -0,0 +1,17 @@ +// ==============================|| OVERRIDES - LINER PROGRESS ||============================== // + +export default function LinearProgress() { + return { + MuiLinearProgress: { + styleOverrides: { + root: { + height: 6, + borderRadius: 100 + }, + bar: { + borderRadius: 100 + } + } + } + }; +} diff --git a/egovframe-template-simple-react-contribution/src/themes/overrides/Link.js b/egovframe-template-simple-react-contribution/src/themes/overrides/Link.js new file mode 100644 index 0000000..fe7b409 --- /dev/null +++ b/egovframe-template-simple-react-contribution/src/themes/overrides/Link.js @@ -0,0 +1,11 @@ +// ==============================|| OVERRIDES - LINK ||============================== // + +export default function Link() { + return { + MuiLink: { + defaultProps: { + underline: 'hover' + } + } + }; +} diff --git a/egovframe-template-simple-react-contribution/src/themes/overrides/ListItemIcon.js b/egovframe-template-simple-react-contribution/src/themes/overrides/ListItemIcon.js new file mode 100644 index 0000000..225a6a1 --- /dev/null +++ b/egovframe-template-simple-react-contribution/src/themes/overrides/ListItemIcon.js @@ -0,0 +1,13 @@ +// ==============================|| OVERRIDES - LIST ITEM ICON ||============================== // + +export default function ListItemIcon() { + return { + MuiListItemIcon: { + styleOverrides: { + root: { + minWidth: 24 + } + } + } + }; +} diff --git a/egovframe-template-simple-react-contribution/src/themes/overrides/OutlinedInput.js b/egovframe-template-simple-react-contribution/src/themes/overrides/OutlinedInput.js new file mode 100644 index 0000000..7a34b14 --- /dev/null +++ b/egovframe-template-simple-react-contribution/src/themes/overrides/OutlinedInput.js @@ -0,0 +1,47 @@ +// material-ui +import { alpha } from '@mui/material/styles'; + +// ==============================|| OVERRIDES - OUTLINED INPUT ||============================== // + +export default function OutlinedInput(theme) { + return { + MuiOutlinedInput: { + styleOverrides: { + input: { + padding: '10.5px 14px 10.5px 12px' + }, + notchedOutline: { + borderColor: theme.palette.grey[300] + }, + root: { + '&:hover .MuiOutlinedInput-notchedOutline': { + borderColor: theme.palette.primary.light + }, + '&.Mui-focused': { + boxShadow: `0 0 0 2px ${alpha(theme.palette.primary.main, 0.2)}`, + '& .MuiOutlinedInput-notchedOutline': { + border: `1px solid ${theme.palette.primary.light}` + } + }, + '&.Mui-error': { + '&:hover .MuiOutlinedInput-notchedOutline': { + borderColor: theme.palette.error.light + }, + '&.Mui-focused': { + boxShadow: `0 0 0 2px ${alpha(theme.palette.error.main, 0.2)}`, + '& .MuiOutlinedInput-notchedOutline': { + border: `1px solid ${theme.palette.error.light}` + } + } + } + }, + inputSizeSmall: { + padding: '7.5px 8px 7.5px 12px' + }, + inputMultiline: { + padding: 0 + } + } + } + }; +} diff --git a/egovframe-template-simple-react-contribution/src/themes/overrides/Tab.js b/egovframe-template-simple-react-contribution/src/themes/overrides/Tab.js new file mode 100644 index 0000000..2c41b14 --- /dev/null +++ b/egovframe-template-simple-react-contribution/src/themes/overrides/Tab.js @@ -0,0 +1,14 @@ +// ==============================|| OVERRIDES - TAB ||============================== // + +export default function Tab(theme) { + return { + MuiTab: { + styleOverrides: { + root: { + minHeight: 46, + color: theme.palette.text.primary + } + } + } + }; +} diff --git a/egovframe-template-simple-react-contribution/src/themes/overrides/TableCell.js b/egovframe-template-simple-react-contribution/src/themes/overrides/TableCell.js new file mode 100644 index 0000000..debe66c --- /dev/null +++ b/egovframe-template-simple-react-contribution/src/themes/overrides/TableCell.js @@ -0,0 +1,20 @@ +// ==============================|| OVERRIDES - TABLE CELL ||============================== // + +export default function TableCell(theme) { + return { + MuiTableCell: { + styleOverrides: { + root: { + fontSize: '0.875rem', + padding: 12, + borderColor: theme.palette.divider + }, + head: { + fontWeight: 600, + paddingTop: 20, + paddingBottom: 20 + } + } + } + }; +} diff --git a/egovframe-template-simple-react-contribution/src/themes/overrides/Tabs.js b/egovframe-template-simple-react-contribution/src/themes/overrides/Tabs.js new file mode 100644 index 0000000..661de7d --- /dev/null +++ b/egovframe-template-simple-react-contribution/src/themes/overrides/Tabs.js @@ -0,0 +1,13 @@ +// ==============================|| OVERRIDES - TABS ||============================== // + +export default function Tabs() { + return { + MuiTabs: { + styleOverrides: { + vertical: { + overflow: 'visible' + } + } + } + }; +} diff --git a/egovframe-template-simple-react-contribution/src/themes/overrides/Typography.js b/egovframe-template-simple-react-contribution/src/themes/overrides/Typography.js new file mode 100644 index 0000000..1bd78ad --- /dev/null +++ b/egovframe-template-simple-react-contribution/src/themes/overrides/Typography.js @@ -0,0 +1,13 @@ +// ==============================|| OVERRIDES - TYPOGRAPHY ||============================== // + +export default function Typography() { + return { + MuiTypography: { + styleOverrides: { + gutterBottom: { + marginBottom: 12 + } + } + } + }; +} diff --git a/egovframe-template-simple-react-contribution/src/themes/overrides/index.js b/egovframe-template-simple-react-contribution/src/themes/overrides/index.js new file mode 100644 index 0000000..3db4b76 --- /dev/null +++ b/egovframe-template-simple-react-contribution/src/themes/overrides/index.js @@ -0,0 +1,41 @@ +// third-party +import { merge } from 'lodash'; + +// project import +import Badge from './Badge'; +import Button from './Button'; +import CardContent from './CardContent'; +import Checkbox from './Checkbox'; +import Chip from './Chip'; +import IconButton from './IconButton'; +import InputLabel from './InputLabel'; +import LinearProgress from './LinearProgress'; +import Link from './Link'; +import ListItemIcon from './ListItemIcon'; +import OutlinedInput from './OutlinedInput'; +import Tab from './Tab'; +import TableCell from './TableCell'; +import Tabs from './Tabs'; +import Typography from './Typography'; + +// ==============================|| OVERRIDES - MAIN ||============================== // + +export default function ComponentsOverrides(theme) { + return merge( + Button(theme), + Badge(theme), + CardContent(), + Checkbox(theme), + Chip(theme), + IconButton(theme), + InputLabel(theme), + LinearProgress(), + Link(), + ListItemIcon(), + OutlinedInput(theme), + Tab(theme), + TableCell(theme), + Tabs(), + Typography() + ); +} diff --git a/egovframe-template-simple-react-contribution/src/themes/palette.js b/egovframe-template-simple-react-contribution/src/themes/palette.js new file mode 100644 index 0000000..d20075f --- /dev/null +++ b/egovframe-template-simple-react-contribution/src/themes/palette.js @@ -0,0 +1,60 @@ +// material-ui +import { createTheme } from '@mui/material/styles'; + +// third-party +import { presetPalettes } from '@ant-design/colors'; + +// project import +import ThemeOption from './theme'; + +// ==============================|| DEFAULT THEME - PALETTE ||============================== // + +const Palette = (mode) => { + const colors = presetPalettes; + + const greyPrimary = [ + '#ffffff', + '#fafafa', + '#f5f5f5', + '#f0f0f0', + '#d9d9d9', + '#bfbfbf', + '#8c8c8c', + '#595959', + '#262626', + '#141414', + '#000000' + ]; + const greyAscent = ['#fafafa', '#bfbfbf', '#434343', '#1f1f1f']; + const greyConstant = ['#fafafb', '#e6ebf1']; + + colors.grey = [...greyPrimary, ...greyAscent, ...greyConstant]; + + const paletteColor = ThemeOption(colors); + + return createTheme({ + palette: { + mode, + common: { + black: '#000', + white: '#fff' + }, + ...paletteColor, + text: { + primary: paletteColor.grey[700], + secondary: paletteColor.grey[500], + disabled: paletteColor.grey[400] + }, + action: { + disabled: paletteColor.grey[300] + }, + divider: paletteColor.grey[200], + background: { + paper: paletteColor.grey[0], + default: paletteColor.grey.A50 + } + } + }); +}; + +export default Palette; diff --git a/egovframe-template-simple-react-contribution/src/themes/shadows.js b/egovframe-template-simple-react-contribution/src/themes/shadows.js new file mode 100644 index 0000000..9c56b9e --- /dev/null +++ b/egovframe-template-simple-react-contribution/src/themes/shadows.js @@ -0,0 +1,13 @@ +// material-ui +import { alpha } from '@mui/material/styles'; + +// ==============================|| DEFAULT THEME - CUSTOM SHADOWS ||============================== // + +const CustomShadows = (theme) => ({ + button: `0 2px #0000000b`, + text: `0 -1px 0 rgb(0 0 0 / 12%)`, + z1: `0px 2px 8px ${alpha(theme.palette.grey[900], 0.15)}` + // only available in paid version +}); + +export default CustomShadows; diff --git a/egovframe-template-simple-react-contribution/src/themes/theme/index.js b/egovframe-template-simple-react-contribution/src/themes/theme/index.js new file mode 100644 index 0000000..670cfef --- /dev/null +++ b/egovframe-template-simple-react-contribution/src/themes/theme/index.js @@ -0,0 +1,92 @@ +// ==============================|| PRESET THEME - THEME SELECTOR ||============================== // + +const Theme = (colors) => { + const { blue, red, gold, cyan, green, grey } = colors; + const greyColors = { + 0: grey[0], + 50: grey[1], + 100: grey[2], + 200: grey[3], + 300: grey[4], + 400: grey[5], + 500: grey[6], + 600: grey[7], + 700: grey[8], + 800: grey[9], + 900: grey[10], + A50: grey[15], + A100: grey[11], + A200: grey[12], + A400: grey[13], + A700: grey[14], + A800: grey[16] + }; + const contrastText = '#fff'; + + return { + primary: { + lighter: blue[0], + 100: blue[1], + 200: blue[2], + light: blue[3], + 400: blue[4], + main: blue[5], + dark: blue[6], + 700: blue[7], + darker: blue[8], + 900: blue[9], + contrastText + }, + secondary: { + lighter: greyColors[100], + 100: greyColors[100], + 200: greyColors[200], + light: greyColors[300], + 400: greyColors[400], + main: greyColors[500], + 600: greyColors[600], + dark: greyColors[700], + 800: greyColors[800], + darker: greyColors[900], + A100: greyColors[0], + A200: greyColors.A400, + A300: greyColors.A700, + contrastText: greyColors[0] + }, + error: { + lighter: red[0], + light: red[2], + main: red[4], + dark: red[7], + darker: red[9], + contrastText + }, + warning: { + lighter: gold[0], + light: gold[3], + main: gold[5], + dark: gold[7], + darker: gold[9], + contrastText: greyColors[100] + }, + info: { + lighter: cyan[0], + light: cyan[3], + main: cyan[5], + dark: cyan[7], + darker: cyan[9], + contrastText + }, + success: { + lighter: green[0], + light: green[3], + main: green[5], + dark: green[7], + darker: green[9], + contrastText + }, + grey: greyColors + }; +}; + +export default Theme; diff --git a/egovframe-template-simple-react-contribution/src/themes/typography.js b/egovframe-template-simple-react-contribution/src/themes/typography.js new file mode 100644 index 0000000..d6dd849 --- /dev/null +++ b/egovframe-template-simple-react-contribution/src/themes/typography.js @@ -0,0 +1,71 @@ +// ==============================|| DEFAULT THEME - TYPOGRAPHY ||============================== // + +const Typography = (fontFamily) => ({ + htmlFontSize: 16, + fontFamily, + fontWeightLight: 300, + fontWeightRegular: 400, + fontWeightMedium: 500, + fontWeightBold: 600, + h1: { + fontWeight: 600, + fontSize: '2.375rem', + lineHeight: 1.21 + }, + h2: { + fontWeight: 600, + fontSize: '1.875rem', + lineHeight: 1.27 + }, + h3: { + fontWeight: 600, + fontSize: '1.5rem', + lineHeight: 1.33 + }, + h4: { + fontWeight: 600, + fontSize: '1.25rem', + lineHeight: 1.4 + }, + h5: { + fontWeight: 600, + fontSize: '1rem', + lineHeight: 1.5 + }, + h6: { + fontWeight: 400, + fontSize: '0.875rem', + lineHeight: 1.57 + }, + caption: { + fontWeight: 400, + fontSize: '0.75rem', + lineHeight: 1.66 + }, + body1: { + fontSize: '0.875rem', + lineHeight: 1.57 + }, + body2: { + fontSize: '0.75rem', + lineHeight: 1.66 + }, + subtitle1: { + fontSize: '0.875rem', + fontWeight: 600, + lineHeight: 1.57 + }, + subtitle2: { + fontSize: '0.75rem', + fontWeight: 500, + lineHeight: 1.66 + }, + overline: { + lineHeight: 1.66 + }, + button: { + textTransform: 'capitalize' + } +}); + +export default Typography;