@lunit/design-system 1.0.0-a.4 → 1.0.0-b.1

package/src/foundation/colors/index.ts

@@ -11,7 +11,7 @@ export type GreyColor = Record<keyof typeof base.grey, PaletteColor>;
 
 declare module "@mui/material/styles/createPalette" {
   interface PaletteOptions {
-    lunit?: {
+    lunit_global?: {
       grey: GreyColor;
       blue: BaseColor;
       green: BaseColor;
@@ -22,11 +22,11 @@ declare module "@mui/material/styles/createPalette" {
       red: BaseColor;
       yellow: BaseColor;
     };
-    token?: ColorToken;
+    lunit_token?: ColorToken;
   }
 
   interface Palette {
-    lunit: {
+    lunit_global: {
       grey: GreyColor;
       blue: BaseColor;
       green: BaseColor;
@@ -37,7 +37,7 @@ declare module "@mui/material/styles/createPalette" {
       red: BaseColor;
       yellow: BaseColor;
     };
-    token: ColorToken;
+    lunit_token: ColorToken;
   }
 }
 
@@ -123,29 +123,32 @@ export const createColorCssBaseline = () => {
 };
 
 // TODO: TextColors 삭제하고 관련된 설정 수정하기
-const lunitColors: PaletteOptions["lunit"] = ((): PaletteOptions["lunit"] => {
-  const ret: any = {};
-  for (const colorKey in base) {
-    if (base[`${colorKey}Text` as ColorKey]) {
-      const baseColors = base[colorKey as ColorKey];
-      const textColors = base[`${colorKey}Text` as ColorKey];
-      ret[colorKey] = {};
-      for (const key in baseColors) {
-        if (baseColors.hasOwnProperty(key)) {
-          const color = baseColors[Number(key) as keyof typeof baseColors];
-          const textColor = textColors[Number(key) as keyof typeof textColors];
-          ret[colorKey][Number(key)] = {
-            light: color,
-            main: color,
-            dark: color,
-            contrastText: textColor,
-          };
+// TODO: opacity 글로벌 팔레트에 추가 여부 확인해서 작업하기
+const lunitColors: PaletteOptions["lunit_global"] =
+  ((): PaletteOptions["lunit_global"] => {
+    const ret: any = {};
+    for (const colorKey in base) {
+      if (base[`${colorKey}Text` as ColorKey]) {
+        const baseColors = base[colorKey as ColorKey];
+        const textColors = base[`${colorKey}Text` as ColorKey];
+        ret[colorKey] = {};
+        for (const key in baseColors) {
+          if (baseColors.hasOwnProperty(key)) {
+            const color = baseColors[Number(key) as keyof typeof baseColors];
+            const textColor =
+              textColors[Number(key) as keyof typeof textColors];
+            ret[colorKey][Number(key)] = {
+              light: color,
+              main: color,
+              dark: color,
+              contrastText: textColor,
+            };
+          }
         }
       }
     }
-  }
-  return ret;
-})();
+    return ret;
+  })();
 
 const paletteOptions = {
   primary: {
@@ -167,8 +170,8 @@ const paletteOptions = {
     main: base.green[40], // core.text_success.dark1
   },
   grey: base.greyForMUI,
-  lunit: lunitColors,
-  token: {
+  lunit_global: lunitColors,
+  lunit_token: {
     core: {
       bg_01: "var(--bg_01)",
       bg_02: "var(--bg_02)",
@@ -197,17 +200,15 @@ const paletteOptions = {
       shadow_04: "var(--shadow_04)",
     },
     component: {
-      btn_contained_primary_bg: "var(--btn_contained_primary_bg)",
-      btn_contained_primary_text: "var(--btn_contained_primary_text)",
-      btn_contained_secondary_bg: "var(--btn_contained_secondary_bg)",
-      btn_contained_secondary_text: "var(--btn_contained_secondary_text)",
-      btn_contained_error_bg: "var(--btn_contained_error_bg)",
-      btn_contained_error_text: "var(--btn_contained_error_text)",
-      btn_outlined_primary_border: "var(--btn_outlined_primary_border)",
-      btn_outlined_primary_text: "var(--btn_outlined_primary_text)",
-      btn_ghost_primary_text: "var(--btn_ghost_primary_text)",
-      btn_ghost_secondary_text: "var(--btn_ghost_secondary_text)",
-      btn_ghost_error_text: "var(--btn_ghost_error_text)",
+      btn_primary_bg: "var(--btn_primary_bg)",
+      btn_secondary_bg: "var(--btn_secondary_bg)",
+      btn_error_bg: "var(--btn_error_bg)",
+      btn_primary_border: "var(--btn_primary_border)",
+      btn_secondary_border: "var(--btn_secondary_border)",
+      btn_primary_text_1: "var(--btn_primary_text_1)",
+      btn_primary_text_2: "var(--btn_primary_text_2)",
+      btn_secondary_text: "var(--btn_secondary_text)",
+      btn_error_text: "var(--btn_error_text)",
       btn_selected_primary_bg: "var(--btn_selected_primary_bg)",
       btn_selected_primary_text: "var(--btn_selected_primary_text)",
       btn_selected_secondary_bg: "var(--btn_selected_secondary_bg)",

package/src/foundation/colors/token/component.ts

@@ -8,7 +8,7 @@ export interface TokenComponentColorValue {
 
 export const tokenComponentColor: TokenComponentColorValue = {
   btn: {
-    btn_contained_primary_bg: {
+    btn_primary_bg: {
       light1: "--lunit_teal_30",
       light2: "--lunit_teal_30",
       dark1: "--lunit_teal_40",
@@ -16,15 +16,7 @@ export const tokenComponentColor: TokenComponentColorValue = {
       dark3: "--lunit_teal_40",
       dark4: "--lunit_teal_40",
     },
-    btn_contained_primary_text: {
-      light1: "--grey_95",
-      light2: "--grey_95",
-      dark1: "--grey_95",
-      dark2: "--grey_95",
-      dark3: "--grey_95",
-      dark4: "--grey_95",
-    },
-    btn_contained_secondary_bg: {
+    btn_secondary_bg: {
       light1: "--grey_15",
       light2: "--grey_15",
       dark1: "--grey_60",
@@ -32,15 +24,7 @@ export const tokenComponentColor: TokenComponentColorValue = {
       dark3: "--grey_60",
       dark4: "--grey_60",
     },
-    btn_contained_secondary_text: {
-      light1: "--grey_95",
-      light2: "--grey_95",
-      dark1: "--grey_5",
-      dark2: "--grey_5",
-      dark3: "--grey_5",
-      dark4: "--grey_5",
-    },
-    btn_contained_error_bg: {
+    btn_error_bg: {
       light1: "--red_30",
       light2: "--red_30",
       dark1: "--red_40",
@@ -48,15 +32,7 @@ export const tokenComponentColor: TokenComponentColorValue = {
       dark3: "--red_40",
       dark4: "--red_40",
     },
-    btn_contained_error_text: {
-      light1: "--grey_95",
-      light2: "--grey_95",
-      dark1: "--grey_95",
-      dark2: "--grey_95",
-      dark3: "--grey_95",
-      dark4: "--grey_95",
-    },
-    btn_outlined_primary_border: {
+    btn_primary_border: {
       light1: "--lunit_teal_40",
       light2: "--lunit_teal_40",
       dark1: "--lunit_teal_40",
@@ -64,15 +40,15 @@ export const tokenComponentColor: TokenComponentColorValue = {
       dark3: "--lunit_teal_40",
       dark4: "--lunit_teal_40",
     },
-    btn_outlined_primary_text: {
-      light1: "--lunit_teal_50",
-      light2: "--lunit_teal_50",
-      dark1: "--lunit_teal_40",
-      dark2: "--lunit_teal_40",
-      dark3: "--lunit_teal_40",
-      dark4: "--lunit_teal_40",
+    btn_secondary_border: {
+      light1: "--grey_15",
+      light2: "--grey_15",
+      dark1: "--grey_5",
+      dark2: "--grey_5",
+      dark3: "--grey_5",
+      dark4: "--grey_5",
     },
-    btn_ghost_primary_text: {
+    btn_primary_text_1: {
       light1: "--lunit_teal_50",
       light2: "--lunit_teal_50",
       dark1: "--lunit_teal_40",
@@ -80,7 +56,15 @@ export const tokenComponentColor: TokenComponentColorValue = {
       dark3: "--lunit_teal_40",
       dark4: "--lunit_teal_40",
     },
-    btn_ghost_secondary_text: {
+    btn_primary_text_2: {
+      light1: "--grey_95",
+      light2: "--grey_95",
+      dark1: "--grey_95",
+      dark2: "--grey_95",
+      dark3: "--grey_95",
+      dark4: "--grey_95",
+    },
+    btn_secondary_text: {
       light1: "--grey_95",
       light2: "--grey_95",
       dark1: "--grey_5",
@@ -88,7 +72,7 @@ export const tokenComponentColor: TokenComponentColorValue = {
       dark3: "--grey_5",
       dark4: "--grey_5",
     },
-    btn_ghost_error_text: {
+    btn_error_text: {
       light1: "--red_40",
       light2: "--red_40",
       dark1: "--red_40",

package/src/foundation/colors/types.ts

@@ -29,17 +29,15 @@ export interface ColorToken {
     shadow_04: CSSPropertyColor;
   };
   component: {
-    btn_contained_primary_bg: CSSPropertyColor;
-    btn_contained_primary_text: CSSPropertyColor;
-    btn_contained_secondary_bg: CSSPropertyColor;
-    btn_contained_secondary_text: CSSPropertyColor;
-    btn_contained_error_bg: CSSPropertyColor;
-    btn_contained_error_text: CSSPropertyColor;
-    btn_outlined_primary_border: CSSPropertyColor;
-    btn_outlined_primary_text: CSSPropertyColor;
-    btn_ghost_primary_text: CSSPropertyColor;
-    btn_ghost_secondary_text: CSSPropertyColor;
-    btn_ghost_error_text: CSSPropertyColor;
+    btn_primary_bg: CSSPropertyColor;
+    btn_secondary_bg: CSSPropertyColor;
+    btn_error_bg: CSSPropertyColor;
+    btn_primary_border: CSSPropertyColor;
+    btn_secondary_border: CSSPropertyColor;
+    btn_primary_text_1: CSSPropertyColor;
+    btn_primary_text_2: CSSPropertyColor;
+    btn_secondary_text: CSSPropertyColor;
+    btn_error_text: CSSPropertyColor;
     btn_selected_primary_bg: CSSPropertyColor;
     btn_selected_primary_text: CSSPropertyColor;
     btn_selected_secondary_bg: CSSPropertyColor;

package/src/index.ts

@@ -1,9 +1,10 @@
-export { default as theme } from "./theme";
+export { default as theme, themeOptions } from "./theme";
 export { base as baseColors } from "./foundation/colors";
 
 export { default as Alert } from "./components/Alert";
 export { default as Button } from "./components/Button";
 export { default as Chip } from "./components/Chip";
+export { default as Checkbox } from "./components/Checkbox";
 export { default as DataTable } from "./components/DataTable";
 export { default as DatePicker } from "./components/DatePicker";
 export { default as Dropdown } from "./components/Dropdown";
@@ -12,7 +13,9 @@ export { default as Modal } from "./components/Modal";
 export { default as Radio } from "./components/Radio";
 export { default as RadioGroup } from "./components/RadioGroup";
 export { default as TextField } from "./components/TextField";
+export { default as Toast } from "./components/Toast";
 export { default as Toggle } from "./components/Toggle";
 export { default as ToggleButton } from "./components/ToggleButton";
 export { default as ToggleButtonGroup } from "./components/ToggleButtonGroup";
 export { default as Tooltip } from "./components/Tooltip";
+export { default as Typography } from "./components/Typography";

package/src/stories/components/Alert/Alert.stories.tsx

@@ -62,7 +62,7 @@ const AlertChildrenContentLong = () => {
     <Typography variant="body2_14_regular">
       Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
       tempor incididunt ut{" "}
-      <u style={{ color: theme.palette.token.core.link_primary }}>
+      <u style={{ color: theme.palette.lunit_token.core.link_primary }}>
         labore et dolore
       </u>{" "}
       magna aliqua. A diam sollicitudin tempor id eu nisl nunc mi. Auctor augue

package/src/stories/components/Button/Kind.stories.tsx

@@ -450,13 +450,16 @@ const OutlinedButtonTemplate: StoryFn<typeof Button> = ({
 }) => {
   return (
     <>
-      <Table sx={{ width: 250 }}>
+      <Table sx={{ width: 600 }}>
         <TableHead>
           <TableRow>
             <TableCell></TableCell>
             <TableCell sx={{ typography: "body2_14_medium", color: "inherit" }}>
               Outlined Primary
             </TableCell>
+            <TableCell sx={{ typography: "body2_14_medium", color: "inherit" }}>
+              Outlined Secondary
+            </TableCell>
           </TableRow>
         </TableHead>
         <TableBody>
@@ -468,7 +471,12 @@ const OutlinedButtonTemplate: StoryFn<typeof Button> = ({
             </TableCell>
             <TableCell>
               <Button {...restProps} kind="outlined">
-                Text
+                {restProps.children}
+              </Button>
+            </TableCell>
+            <TableCell>
+              <Button {...restProps} kind="outlined" color="secondary">
+                {restProps.children}
               </Button>
             </TableCell>
           </TableRow>
@@ -480,7 +488,17 @@ const OutlinedButtonTemplate: StoryFn<typeof Button> = ({
             </TableCell>
             <TableCell>
               <Button {...restProps} id="hover7" kind="outlined">
-                Text
+                {restProps.children}
+              </Button>
+            </TableCell>
+            <TableCell>
+              <Button
+                {...restProps}
+                id="hover7"
+                kind="outlined"
+                color="secondary"
+              >
+                {restProps.children}
               </Button>
             </TableCell>
           </TableRow>
@@ -496,7 +514,17 @@ const OutlinedButtonTemplate: StoryFn<typeof Button> = ({
                 kind="outlined"
                 className="Mui-focusVisible"
               >
-                Text
+                {restProps.children}
+              </Button>
+            </TableCell>
+            <TableCell>
+              <Button
+                {...restProps}
+                kind="outlined"
+                color="secondary"
+                className="Mui-focusVisible"
+              >
+                {restProps.children}
               </Button>
             </TableCell>
           </TableRow>
@@ -508,7 +536,12 @@ const OutlinedButtonTemplate: StoryFn<typeof Button> = ({
             </TableCell>
             <TableCell>
               <Button {...restProps} kind="outlined" disabled>
-                Text
+                {restProps.children}
+              </Button>
+            </TableCell>
+            <TableCell>
+              <Button {...restProps} kind="outlined" color="secondary" disabled>
+                {restProps.children}
               </Button>
             </TableCell>
           </TableRow>

package/src/stories/components/Toast/Toast.stories.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { StoryFn, Meta } from "@storybook/react";
 import { Box } from "@mui/material";
 
-import Toast from "@/components/Toast/Toast";
+import Toast from "@/components/Toast";
 import { action } from "@storybook/addon-actions";
 import Button from "@/components/Button";
 

package/src/stories/foundation/Typography/Typography.mdx

@@ -1,7 +1,7 @@
 import { Meta, Canvas, Story } from "@storybook/blocks";
 import * as TypographyStories from "./TypographyExamples.stories";
 
-import { Typography } from "@mui/material";
+import Typography from "@/components/Typography";
 
 import { variants } from "./const";
 

package/src/stories/foundation/Typography/Typography.stories.tsx

@@ -1,9 +1,11 @@
 import React from "react";
 
 import { StoryFn } from "@storybook/react";
-import { Box, Typography } from "@mui/material";
+import { Box } from "@mui/material";
 import { styled } from "@mui/material/styles";
 
+import Typography from "@/components/Typography";
+
 import { variantArray } from "./const";
 
 export default {

package/src/stories/foundation/Typography/TypographyExamples.stories.tsx

@@ -1,8 +1,8 @@
 import React from "react";
-import { Typography } from "@mui/material";
 
-import { variants } from "./const";
+import Typography from "@/components/Typography";
 
+import { variants } from "./const";
 import TypographyGroup from "./TypographyGroup";
 
 const AllVariants = () => (

package/src/stories/foundation/Typography/TypographyGroup.tsx

@@ -1,12 +1,8 @@
 import React from "react";
 
-import {
-  Box,
-  Typography,
-  styled,
-  useTheme,
-  TypographyProps,
-} from "@mui/material";
+import { Box, styled, useTheme, TypographyProps } from "@mui/material";
+
+import Typography from "@/components/Typography";
 
 export const TypographyContent = styled(Box)({
   display: "flex",
@@ -22,7 +18,7 @@ export const TypographyItem = styled(Box)({
 
 export const TypographyTitle = styled(Typography)(({ theme }) => ({
   width: 200,
-  color: theme.palette.token.core.text_light,
+  color: theme.palette.lunit_token.core.text_light,
 }));
 
 export const TypographyDummy = styled(Typography)({

package/src/stories/foundation/colors/Colors.stories.tsx

@@ -18,7 +18,7 @@ const BaseColors = () => {
   return (
     <Container>
       {map(
-        theme.palette.lunit,
+        theme.palette.lunit_global,
         (colors: BaseColor | GreyColor, paletteKey: string) => (
           <div key={paletteKey}>
             <Typography
@@ -34,8 +34,8 @@ const BaseColors = () => {
               {map(colors, (_: string, colorKey: string) => (
                 <ColorContainer key={colorKey}>
                   <Color
-                    color={`lunit.${paletteKey}.${colorKey}.contrastText`}
-                    bgcolor={`lunit.${paletteKey}.${colorKey}.main`}
+                    color={`lunit_global.${paletteKey}.${colorKey}.contrastText`}
+                    bgcolor={`lunit_global.${paletteKey}.${colorKey}.main`}
                   >
                     <Typography variant="h4">T</Typography>
                   </Color>

package/src/stories/foundation/colors/Token.inComponent.stories.tsx

@@ -5,13 +5,13 @@ import { Box, styled, TextField, Typography, useTheme } from "@mui/material";
 export const InComponentWithStyled = () => {
   const StyledTextField = styled(TextField)(({ theme }) => ({
     "& .MuiInputBase-root": {
-      backgroundColor: theme.palette.token.component.textfield_bg,
-      color: theme.palette.token.core.text_normal,
+      backgroundColor: theme.palette.lunit_token.component.textfield_bg,
+      color: theme.palette.lunit_token.core.text_normal,
       "& .MuiInputBase-input": {
         padding: "8px 16px",
       },
       "&.Mui-focused fieldset": {
-        borderColor: theme.palette.token.core.focused,
+        borderColor: theme.palette.lunit_token.core.focused,
       },
     },
   }));
@@ -49,13 +49,13 @@ export const InComponentWithSx = () => {
           sx={{
             "& .MuiInputBase-root": {
               backgroundColor: (theme) =>
-                theme.palette.token.component.textfield_bg,
-              color: (theme) => theme.palette.token.core.text_normal,
+                theme.palette.lunit_token.component.textfield_bg,
+              color: (theme) => theme.palette.lunit_token.core.text_normal,
               "& .MuiInputBase-input": {
                 padding: "8px 16px",
               },
               "&.Mui-focused fieldset": {
-                borderColor: (theme) => theme.palette.token.core.focused,
+                borderColor: (theme) => theme.palette.lunit_token.core.focused,
               },
             },
           }}
@@ -65,10 +65,11 @@ export const InComponentWithSx = () => {
           <Box
             sx={{
               backgroundColor: (theme) =>
-                theme.palette.token.component.alert_info_bg,
-              color: (theme) => theme.palette.token.component.alert_info_border,
+                theme.palette.lunit_token.component.alert_info_bg,
+              color: (theme) =>
+                theme.palette.lunit_token.component.alert_info_border,
               boxShadow: (theme) =>
-                `20px -10px 5px ${theme.palette.token.core.shadow_01}`,
+                `20px -10px 5px ${theme.palette.lunit_token.core.shadow_01}`,
               width: 300,
               height: 80,
             }}
@@ -83,13 +84,13 @@ export const InComponentWithSx = () => {
           sx={{
             "& .MuiInputBase-root": {
               backgroundColor: (theme) =>
-                theme.palette.token.component.textfield_bg,
-              color: (theme) => theme.palette.token.core.text_normal,
+                theme.palette.lunit_token.component.textfield_bg,
+              color: (theme) => theme.palette.lunit_token.core.text_normal,
               "& .MuiInputBase-input": {
                 padding: "8px 16px",
               },
               "&.Mui-focused fieldset": {
-                borderColor: (theme) => theme.palette.token.core.focused,
+                borderColor: (theme) => theme.palette.lunit_token.core.focused,
               },
             },
           }}
@@ -99,10 +100,11 @@ export const InComponentWithSx = () => {
           <Box
             sx={{
               backgroundColor: (theme) =>
-                theme.palette.token.component.alert_info_bg,
-              color: (theme) => theme.palette.token.component.alert_info_border,
+                theme.palette.lunit_token.component.alert_info_bg,
+              color: (theme) =>
+                theme.palette.lunit_token.component.alert_info_border,
               boxShadow: (theme) =>
-                `20px -10px 5px ${theme.palette.token.core.shadow_01}`,
+                `20px -10px 5px ${theme.palette.lunit_token.core.shadow_01}`,
               width: 300,
               height: 80,
             }}
@@ -124,7 +126,7 @@ export const InComponentWithInlineStyle = () => {
         <TextField
           placeholder="Inline Styled Text Field"
           style={{
-            backgroundColor: theme.palette.token.component.textfield_bg,
+            backgroundColor: theme.palette.lunit_token.component.textfield_bg,
           }}
         />
       </BaseBox>
@@ -132,7 +134,7 @@ export const InComponentWithInlineStyle = () => {
         <TextField
           placeholder="Inline Styled Text Field"
           style={{
-            backgroundColor: theme.palette.token.component.textfield_bg,
+            backgroundColor: theme.palette.lunit_token.component.textfield_bg,
           }}
         />
       </BaseBox>
@@ -151,13 +153,13 @@ const BaseBox = ({ theme, children }: BaseBoxProps) => {
       className={theme === "light" ? "light1" : "dark1"}
       width={500}
       height={200}
-      bgcolor={theme === "light" ? `lunit.grey.0.main` : `lunit.grey.80.main`}
+      bgcolor={(sxTheme) => sxTheme.palette.lunit_token.core.bg_01}
       border="1px solid"
       p={2}
     >
       <Typography
         variant="body1_16_semibold"
-        color={(theme) => theme.palette.token.core.text_normal}
+        color={(sxTheme) => sxTheme.palette.lunit_token.core.text_normal}
       >
         {theme === "light" ? "= light1 =" : "= dark1 ="}
       </Typography>

package/src/stories/foundation/colors/TokenPaletteTable.tsx

@@ -25,7 +25,9 @@ const TokenPaletteTable = ({ kind }: TokenPaletteTableProps) => {
   const theme = useTheme();
 
   const colorTokenMap = Object.entries(
-    kind === "core" ? theme.palette.token.core : theme.palette.token.component
+    kind === "core"
+      ? theme.palette.lunit_token.core
+      : theme.palette.lunit_token.component
   );
 
   const TokenPaletteCell = (props: {
@@ -43,8 +45,8 @@ const TokenPaletteTable = ({ kind }: TokenPaletteTableProps) => {
 
     const boxColorByToken =
       kind === "core"
-        ? theme.palette.token.core[paletteKey as keyof ColorToken["core"]]
-        : theme.palette.token.component[
+        ? theme.palette.lunit_token.core[paletteKey as keyof ColorToken["core"]]
+        : theme.palette.lunit_token.component[
             paletteKey as keyof ColorToken["component"]
           ];
 
@@ -57,7 +59,7 @@ const TokenPaletteTable = ({ kind }: TokenPaletteTableProps) => {
       <TableCell
         className={surface}
         sx={{
-          background: theme.palette.token.core.bg_01,
+          background: theme.palette.lunit_token.core.bg_01,
           padding: 0,
         }}
       >

package/src/stories/foundation/colors/styled.ts

@@ -33,7 +33,7 @@ export const Color = styled(Box)({
 });
 
 export const StyledTypography = styled(Typography)(({ theme }) => ({
-  color: theme.palette.token.core.text_normal,
+  color: theme.palette.lunit_token.core.text_normal,
   marginLeft: 8,
   fontSize: "12px",
 }));

package/src/theme.ts

@@ -1,5 +1,5 @@
 import { deepmerge } from "@mui/utils";
-import { ComponentsOverrides, createTheme } from "@mui/material";
+import { createTheme, ThemeOptions } from "@mui/material";
 import {
   foundationCssBaseline,
   palette,
@@ -9,7 +9,7 @@ import {
 } from "./foundation";
 import { componentsCssBaseline } from "./components";
 
-const theme = createTheme({
+export const themeOptions: ThemeOptions = {
   typography,
   palette,
   spacing,
@@ -41,6 +41,8 @@ const theme = createTheme({
     },
     // @todo add any MUI components theme exported from ./components/index.ts
   },
-});
+};
+
+const theme = createTheme(themeOptions);
 
 export default theme;