@lunit/design-system 1.0.0-a.5 → 1.0.0-b.2

package/src/components/Toggle/Toggle.styled.ts

@@ -1,6 +1,6 @@
 import { styled, Switch as MuiSwitch, SwitchProps } from "@mui/material";
 interface ToggleProps extends SwitchProps {
-  toggleSize: 'medium' | 'large'
+  toggleSize: "medium" | "large";
 }
 
 const toggleStyles = {
@@ -19,15 +19,15 @@ const toggleStyles = {
       transition: "all 100ms ease-in-out",
     },
     switchChecked: {
-      transform: 'translateX(10px)',
+      transform: "translateX(10px)",
     },
     thumb: {
-        width: 14,
-        height: 14,
-    }
+      width: 14,
+      height: 14,
+    },
   },
   large: {
-    root:{
+    root: {
       width: 44,
       height: 24,
       borderRadius: 12,
@@ -41,20 +41,20 @@ const toggleStyles = {
       transition: "all 150ms ease-in-out",
     },
     switchChecked: {
-      transform: 'translateX(20px)',
+      transform: "translateX(20px)",
     },
     thumb: {
       width: 20,
       height: 20,
     },
   },
-}
+};
 
 const indeterminateStyles = {
   large: {
     switchChecked: {
-        top: 8,
-        left: -8,
+      top: 8,
+      left: -8,
     },
     track: {
       borderRadius: 12,
@@ -67,8 +67,8 @@ const indeterminateStyles = {
   },
   medium: {
     switchChecked: {
-        top: 6,
-        left: -4,
+      top: 6,
+      left: -4,
     },
     track: {
       borderRadius: 12,
@@ -78,28 +78,29 @@ const indeterminateStyles = {
       width: 12,
       borderRadius: 2,
     },
-  }
-}
+  },
+};
 
 export const CommonToggle = styled(MuiSwitch, {
-  shouldForwardProp: (props) => props !== 'toggleSize',
+  shouldForwardProp: (props) => props !== "toggleSize",
 })<ToggleProps>(({ theme, toggleSize, disabled }) => {
-  const checkedColor = theme.palette.token.component.selectcontrol_on;
-  const uncheckedColor = theme.palette.token.component.selectcontrol_off;
-  const handlerColor = theme.palette.token.component.selectcontrol_handler;
+  const checkedColor = theme.palette.lunit_token.component.selectcontrol_on;
+  const uncheckedColor = theme.palette.lunit_token.component.selectcontrol_off;
+  const handlerColor =
+    theme.palette.lunit_token.component.selectcontrol_handler;
 
   const toggleStyle = toggleStyles[toggleSize];
   const toggleOpacity = disabled ? 0.38 : 1;
 
   return {
     ...toggleStyle.root,
-    display: 'flex',
+    display: "flex",
     padding: 0,
     overflow: "visible",
     backgroundColor: "transparent",
     opacity: toggleOpacity,
     "& .Mui-focusVisible": {
-       // clear default focus style
+      // clear default focus style
       boxShadow: "none",
       background: "transparent",
       borderColor: "transparent",
@@ -112,51 +113,53 @@ export const CommonToggle = styled(MuiSwitch, {
         boxSizing: "border-box",
         top: -3, // border 1px + offset 2px
         left: -3, // border 1px + offset 2px
-      }
+      },
     },
-    '& .MuiSwitch-track': {
+    "& .MuiSwitch-track": {
       opacity: 1,
       borderRadius: 12,
       backgroundColor: uncheckedColor,
     },
-    '& .MuiSwitch-thumb': {
+    "& .MuiSwitch-thumb": {
       ...toggleStyle.thumb,
       boxShadow: "0px 0px 1px rgba(0, 0, 0, 0.4)",
     },
-    '& .MuiSwitch-switchBase': {
+    "& .MuiSwitch-switchBase": {
       ...toggleStyle.switch,
       padding: 2,
       opacity: 1,
-      '&.Mui-checked': {
+      "&.Mui-checked": {
         ...toggleStyle.switchChecked,
         color: handlerColor,
-        '& + .MuiSwitch-track': {
+        "& + .MuiSwitch-track": {
           opacity: 1,
           backgroundColor: checkedColor,
         },
       },
     },
-    '& .Mui-disabled + .MuiSwitch-track': {
+    "& .Mui-disabled + .MuiSwitch-track": {
       opacity: 1,
     },
-  }});
+  };
+});
 
 export const CommonIndeterminateToggle = styled(CommonToggle, {
-  shouldForwardProp: (props) => props !== 'toggleSize',
+  shouldForwardProp: (props) => props !== "toggleSize",
 })(({ toggleSize }) => {
   const indeterminateStyle = indeterminateStyles[toggleSize];
 
   return {
-  padding: 0,
-  cursor: "pointer",
-  '& .MuiSwitch-switchBase.Mui-checked': {
+    padding: 0,
+    cursor: "pointer",
+    "& .MuiSwitch-switchBase.Mui-checked": {
       ...indeterminateStyle.switchChecked,
-      '& + .MuiSwitch-track': {
+      "& + .MuiSwitch-track": {
         ...indeterminateStyle.track,
+      },
     },
-  },
-  '& .MuiSwitch-thumb': {
-    ...indeterminateStyle.thumb,
-    boxShadow: "none",
-  },
-}});
+    "& .MuiSwitch-thumb": {
+      ...indeterminateStyle.thumb,
+      boxShadow: "none",
+    },
+  };
+});

package/src/components/ToggleButton/ToggleButton.styled.ts

@@ -19,7 +19,7 @@ export const CustomToggleButton = styled(MuiToggleButton, {
   ({
     theme: {
       typography,
-      palette: { token },
+      palette: { lunit_token },
     },
     kind,
     size,
@@ -30,22 +30,22 @@ export const CustomToggleButton = styled(MuiToggleButton, {
   }) => {
     return {
       border: "none",
-      ...commonStyle({ token }),
+      ...commonStyle({ lunit_token }),
       ...iconStyle({ size, hasIconOnly }),
       ...sizeStyle({ size, kind, hasIconOnly, selected, typography }),
-      ...kindStyle({ kind, color, token }),
+      ...kindStyle({ kind, color, lunit_token }),
       ...(selectedColor === "primary" && {
         "&.Mui-selected, &.Mui-selected:hover": {
           border: "none",
-          backgroundColor: token.component.btn_selected_primary_bg,
-          color: token.component.btn_selected_primary_text,
+          backgroundColor: lunit_token.component.btn_selected_primary_bg,
+          color: lunit_token.component.btn_selected_primary_text,
         },
       }),
       ...(selectedColor === "secondary" && {
         "&.Mui-selected, &.Mui-selected:hover": {
           border: "none",
-          backgroundColor: token.component.btn_selected_secondary_bg,
-          color: token.component.btn_selected_secondary_text,
+          backgroundColor: lunit_token.component.btn_selected_secondary_bg,
+          color: lunit_token.component.btn_selected_secondary_text,
         },
       }),
     };

package/src/components/Typography/Typography.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import MuiTypography from "@mui/material/Typography";
+
+import type { TypographyProps } from "@mui/material/Typography";
+import type { TypographyPropsVariantOverridesType } from "../../foundation/Typography";
+
+declare module "@mui/material/Typography" {
+  interface TypographyPropsVariantOverrides
+    extends TypographyPropsVariantOverridesType {}
+}
+
+const Typography = <C extends React.ElementType>(
+  props: TypographyProps<C, { component?: C }>
+) => {
+  return <MuiTypography {...props} />;
+};
+
+export default Typography;

package/src/components/Typography/index.ts

@@ -1,9 +1 @@
-import Typography from "@mui/material/Typography";
-import type { TypographyPropsVariantOverridesType } from "../../foundation/Typography";
-
-declare module "@mui/material/Typography" {
-  interface TypographyPropsVariantOverrides
-    extends TypographyPropsVariantOverridesType {}
-}
-
-export default Typography;
+export { default } from "./Typography";

package/src/foundation/Elevation/index.ts

@@ -2,10 +2,10 @@ import paletteOptions from "../colors";
 import { createCSSVarNames, createCSSVars } from "./utils";
 
 export const shadows = {
-  shadow1: `0px 4px 8px ${paletteOptions.token.core.shadow_01}`,
-  shadow2: `0px 3px 12px ${paletteOptions.token.core.shadow_02}`,
-  shadow3: `0px 12px 24px ${paletteOptions.token.core.shadow_03}`,
-  shadow4: `0px 12px 44px ${paletteOptions.token.core.shadow_04}`,
+  shadow1: `0px 4px 8px ${paletteOptions.lunit_token.core.shadow_01}`,
+  shadow2: `0px 3px 12px ${paletteOptions.lunit_token.core.shadow_02}`,
+  shadow3: `0px 12px 24px ${paletteOptions.lunit_token.core.shadow_03}`,
+  shadow4: `0px 12px 44px ${paletteOptions.lunit_token.core.shadow_04}`,
 };
 
 const shadowVars = createCSSVarNames(shadows);

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;
@@ -19,14 +19,15 @@ declare module "@mui/material/styles/createPalette" {
       lunit_teal: BaseColor;
       magenta: BaseColor;
       orange: BaseColor;
+      purple: BaseColor;
       red: BaseColor;
       yellow: BaseColor;
     };
-    token?: ColorToken;
+    lunit_token?: ColorToken;
   }
 
   interface Palette {
-    lunit: {
+    lunit_global: {
       grey: GreyColor;
       blue: BaseColor;
       green: BaseColor;
@@ -34,10 +35,11 @@ declare module "@mui/material/styles/createPalette" {
       lunit_teal: BaseColor;
       magenta: BaseColor;
       orange: BaseColor;
+      purple: BaseColor;
       red: BaseColor;
       yellow: BaseColor;
     };
-    token: ColorToken;
+    lunit_token: ColorToken;
   }
 }
 
@@ -123,29 +125,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 +172,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)",

package/src/index.ts

@@ -1,4 +1,4 @@
-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";

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/BasicButton.stories.tsx

@@ -12,10 +12,8 @@ import Bell from "@lunit/design-system-icons/Bell";
 import Button from "@/components/Button";
 
 import type { StoryObj, StoryFn, Meta } from "@storybook/react";
-import type { ButtonProps } from "@/components/Button/Button.types";
 
-type Size = Pick<ButtonProps, "size">;
-type SizeValues = Size[keyof Size];
+type SizeValues = "small" | "medium" | "large";
 const sizeList: SizeValues[] = ["small", "medium", "large"];
 
 export default {

package/src/stories/components/TextField/TextFieldMulti.stories.tsx

@@ -107,6 +107,9 @@ const MultiTemplate: StoryFn<typeof TextField> = (args) => (
         <TableCell sx={{ typography: "body2_14_medium", color: "inherit" }}>
           Focused
         </TableCell>
+        <TableCell sx={{ typography: "body2_14_medium", color: "inherit" }}>
+          Error Focused
+        </TableCell>
         <TableCell sx={{ typography: "body2_14_medium", color: "inherit" }}>
           Disabled
         </TableCell>
@@ -123,6 +126,9 @@ const MultiTemplate: StoryFn<typeof TextField> = (args) => (
         <TableCell>
           <TextField {...args} multiline focused />
         </TableCell>
+        <TableCell>
+          <TextField {...args} multiline error focused />
+        </TableCell>
         <TableCell>
           <TextField {...args} multiline disabled />
         </TableCell>

package/src/stories/components/TextField/TextFieldSingle.stories.tsx

@@ -99,6 +99,9 @@ const SingleTemplate: StoryFn<typeof TextField> = (args) => (
         <TableCell sx={{ typography: "body2_14_medium", color: "inherit" }}>
           Focused
         </TableCell>
+        <TableCell sx={{ typography: "body2_14_medium", color: "inherit" }}>
+          Error Focused
+        </TableCell>
         <TableCell sx={{ typography: "body2_14_medium", color: "inherit" }}>
           Disabled
         </TableCell>
@@ -115,6 +118,9 @@ const SingleTemplate: StoryFn<typeof TextField> = (args) => (
         <TableCell>
           <TextField {...args} focused />
         </TableCell>
+        <TableCell>
+          <TextField {...args} error focused />
+        </TableCell>
         <TableCell>
           <TextField {...args} disabled />
         </TableCell>
@@ -137,6 +143,9 @@ const SingleWithIconTemplate: StoryFn<typeof TextField> = (args) => (
         <TableCell sx={{ typography: "body2_14_medium", color: "inherit" }}>
           focused
         </TableCell>
+        <TableCell sx={{ typography: "body2_14_medium", color: "inherit" }}>
+          Error focused
+        </TableCell>
         <TableCell sx={{ typography: "body2_14_medium", color: "inherit" }}>
           Disabled
         </TableCell>
@@ -156,6 +165,9 @@ const SingleWithIconTemplate: StoryFn<typeof TextField> = (args) => (
         <TableCell>
           <TextField {...args} focused leftIcon={<Bell />} />
         </TableCell>
+        <TableCell>
+          <TextField {...args} error focused leftIcon={<Bell />} />
+        </TableCell>
         <TableCell>
           <TextField {...args} disabled leftIcon={<Bell />} />
         </TableCell>
@@ -173,6 +185,9 @@ const SingleWithIconTemplate: StoryFn<typeof TextField> = (args) => (
         <TableCell>
           <TextField {...args} focused rightIcon={<Bell />} />
         </TableCell>
+        <TableCell>
+          <TextField {...args} error focused rightIcon={<Bell />} />
+        </TableCell>
         <TableCell>
           <TextField {...args} disabled rightIcon={<Bell />} />
         </TableCell>
@@ -195,6 +210,15 @@ const SingleWithIconTemplate: StoryFn<typeof TextField> = (args) => (
             rightIcon={<Bell />}
           />
         </TableCell>
+        <TableCell>
+          <TextField
+            {...args}
+            error
+            focused
+            leftIcon={<Bell />}
+            rightIcon={<Bell />}
+          />
+        </TableCell>
         <TableCell>
           <TextField
             {...args}

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

@@ -18,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",
 }));