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

package/dist/types/components/Chip/Chip.styled.d.ts

@@ -6,7 +6,7 @@ export declare const StyledOutlinedChip: import("@emotion/styled").StyledCompone
     children?: null | undefined;
     classes?: Partial<import("@mui/material").ChipClasses> | undefined;
     clickable?: boolean | undefined;
-    color?: "primary" | "secondary" | "error" | "success" | "info" | "warning" | "default" | undefined;
+    color?: "success" | "info" | "warning" | "error" | "primary" | "secondary" | "default" | undefined;
     deleteIcon?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
     disabled?: boolean | undefined;
     icon?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
@@ -16,16 +16,16 @@ export declare const StyledOutlinedChip: import("@emotion/styled").StyledCompone
     skipFocusWhenDisabled?: boolean | undefined;
     sx?: import("@mui/material").SxProps<Theme> | undefined;
     tabIndex?: number | undefined;
-    variant?: "outlined" | "filled" | undefined;
+    variant?: "filled" | "outlined" | undefined;
 } & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, "icon" | keyof import("@mui/material/OverridableComponent").CommonProps | "label" | "tabIndex" | "color" | "children" | "disabled" | "sx" | "size" | "variant" | "avatar" | "clickable" | "deleteIcon" | "onDelete" | "skipFocusWhenDisabled"> & import("@mui/system").MUIStyledCommonProps<Theme> & OutlinedChipProps, {}, {}>;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "variant" | "label" | "tabIndex" | "color" | "icon" | "disabled" | "size" | "avatar" | "clickable" | "deleteIcon" | "onDelete" | "skipFocusWhenDisabled"> & import("@mui/system").MUIStyledCommonProps<Theme> & OutlinedChipProps, {}, {}>;
 export declare const StyledContainedChipBase: import("@emotion/styled").StyledComponent<{
     avatar?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
     children?: null | undefined;
     classes?: Partial<import("@mui/material").ChipClasses> | undefined;
     clickable?: boolean | undefined;
-    color?: "primary" | "secondary" | "error" | "success" | "info" | "warning" | "default" | undefined;
+    color?: "success" | "info" | "warning" | "error" | "primary" | "secondary" | "default" | undefined;
     deleteIcon?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
     disabled?: boolean | undefined;
     icon?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
@@ -35,16 +35,16 @@ export declare const StyledContainedChipBase: import("@emotion/styled").StyledCo
     skipFocusWhenDisabled?: boolean | undefined;
     sx?: import("@mui/material").SxProps<Theme> | undefined;
     tabIndex?: number | undefined;
-    variant?: "outlined" | "filled" | undefined;
+    variant?: "filled" | "outlined" | undefined;
 } & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, "icon" | keyof import("@mui/material/OverridableComponent").CommonProps | "label" | "tabIndex" | "color" | "children" | "disabled" | "sx" | "size" | "variant" | "avatar" | "clickable" | "deleteIcon" | "onDelete" | "skipFocusWhenDisabled"> & import("@mui/system").MUIStyledCommonProps<Theme> & BaseContainedChipProps, {}, {}>;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "variant" | "label" | "tabIndex" | "color" | "icon" | "disabled" | "size" | "avatar" | "clickable" | "deleteIcon" | "onDelete" | "skipFocusWhenDisabled"> & import("@mui/system").MUIStyledCommonProps<Theme> & BaseContainedChipProps, {}, {}>;
 export declare const StyledContainedChipEnable: import("@emotion/styled").StyledComponent<{
     avatar?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
     children?: null | undefined;
     classes?: Partial<import("@mui/material").ChipClasses> | undefined;
     clickable?: boolean | undefined;
-    color?: "primary" | "secondary" | "error" | "success" | "info" | "warning" | "default" | undefined;
+    color?: "success" | "info" | "warning" | "error" | "primary" | "secondary" | "default" | undefined;
     deleteIcon?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
     disabled?: boolean | undefined;
     icon?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
@@ -54,16 +54,16 @@ export declare const StyledContainedChipEnable: import("@emotion/styled").Styled
     skipFocusWhenDisabled?: boolean | undefined;
     sx?: import("@mui/material").SxProps<Theme> | undefined;
     tabIndex?: number | undefined;
-    variant?: "outlined" | "filled" | undefined;
+    variant?: "filled" | "outlined" | undefined;
 } & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, "icon" | keyof import("@mui/material/OverridableComponent").CommonProps | "label" | "tabIndex" | "color" | "children" | "disabled" | "sx" | "size" | "variant" | "avatar" | "clickable" | "deleteIcon" | "onDelete" | "skipFocusWhenDisabled"> & import("@mui/system").MUIStyledCommonProps<Theme> & BaseContainedChipProps & EnableContainedChipProps, {}, {}>;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "variant" | "label" | "tabIndex" | "color" | "icon" | "disabled" | "size" | "avatar" | "clickable" | "deleteIcon" | "onDelete" | "skipFocusWhenDisabled"> & import("@mui/system").MUIStyledCommonProps<Theme> & BaseContainedChipProps & EnableContainedChipProps, {}, {}>;
 export declare const StyledContainedChipDeletable: import("@emotion/styled").StyledComponent<{
     avatar?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
     children?: null | undefined;
     classes?: Partial<import("@mui/material").ChipClasses> | undefined;
     clickable?: boolean | undefined;
-    color?: "primary" | "secondary" | "error" | "success" | "info" | "warning" | "default" | undefined;
+    color?: "success" | "info" | "warning" | "error" | "primary" | "secondary" | "default" | undefined;
     deleteIcon?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
     disabled?: boolean | undefined;
     icon?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
@@ -73,7 +73,7 @@ export declare const StyledContainedChipDeletable: import("@emotion/styled").Sty
     skipFocusWhenDisabled?: boolean | undefined;
     sx?: import("@mui/material").SxProps<Theme> | undefined;
     tabIndex?: number | undefined;
-    variant?: "outlined" | "filled" | undefined;
+    variant?: "filled" | "outlined" | undefined;
 } & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, "icon" | keyof import("@mui/material/OverridableComponent").CommonProps | "label" | "tabIndex" | "color" | "children" | "disabled" | "sx" | "size" | "variant" | "avatar" | "clickable" | "deleteIcon" | "onDelete" | "skipFocusWhenDisabled"> & import("@mui/system").MUIStyledCommonProps<Theme> & BaseContainedChipProps, {}, {}>;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "variant" | "label" | "tabIndex" | "color" | "icon" | "disabled" | "size" | "avatar" | "clickable" | "deleteIcon" | "onDelete" | "skipFocusWhenDisabled"> & import("@mui/system").MUIStyledCommonProps<Theme> & BaseContainedChipProps, {}, {}>;

package/dist/types/components/Toggle/Toggle.styled.d.ts

@@ -1,6 +1,6 @@
 import { SwitchProps } from "@mui/material";
 interface ToggleProps extends SwitchProps {
-    toggleSize: 'medium' | 'large';
+    toggleSize: "medium" | "large";
 }
 export declare const CommonToggle: import("@emotion/styled").StyledComponent<SwitchProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & ToggleProps, {}, {}>;
 export declare const CommonIndeterminateToggle: import("@emotion/styled").StyledComponent<SwitchProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & ToggleProps, {}, {}>;

package/dist/types/components/ToggleButton/ToggleButton.styled.d.ts

@@ -6,7 +6,7 @@ type CustomToggleButtonProps = ToggleButtonProps & {
 export declare const CustomToggleButton: import("@emotion/styled").StyledComponent<{
     children?: import("react").ReactNode;
     classes?: Partial<import("@mui/material").ToggleButtonClasses> | undefined;
-    color?: "primary" | "secondary" | "error" | "success" | "info" | "warning" | "standard" | undefined;
+    color?: "success" | "info" | "warning" | "error" | "standard" | "primary" | "secondary" | undefined;
     disabled?: boolean | undefined;
     disableFocusRipple?: boolean | undefined;
     fullWidth?: boolean | undefined;
@@ -34,6 +34,6 @@ export declare const CustomToggleButton: import("@emotion/styled").StyledCompone
     touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
 }, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
-}, keyof import("@mui/material/OverridableComponent").CommonProps | "tabIndex" | "color" | "children" | "onChange" | "onClick" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "fullWidth" | "size" | "value" | "selected"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & CustomToggleButtonProps, {}, {}>;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "tabIndex" | "color" | "onChange" | "onClick" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "fullWidth" | "size" | "value" | "selected"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & CustomToggleButtonProps, {}, {}>;
 export declare const IconAndChildrenWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export {};

package/dist/types/foundation/colors/index.d.ts

@@ -5,7 +5,7 @@ export type BaseColor = Record<keyof typeof base.blue, PaletteColor>;
 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;
@@ -16,10 +16,10 @@ 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;
@@ -30,7 +30,7 @@ declare module "@mui/material/styles/createPalette" {
             red: BaseColor;
             yellow: BaseColor;
         };
-        token: ColorToken;
+        lunit_token: ColorToken;
     }
 }
 export declare const createColorCssBaseline: () => {
@@ -91,7 +91,7 @@ declare const paletteOptions: {
         A400: string;
         A700: string;
     };
-    lunit: {
+    lunit_global: {
         grey: GreyColor;
         blue: BaseColor;
         green: BaseColor;
@@ -102,7 +102,7 @@ declare const paletteOptions: {
         red: BaseColor;
         yellow: BaseColor;
     } | undefined;
-    token: {
+    lunit_token: {
         core: {
             bg_01: string;
             bg_02: string;

package/dist/types/foundation/index.d.ts

@@ -38,7 +38,7 @@ export declare const palette: {
         A400: string;
         A700: string;
     };
-    lunit: {
+    lunit_global: {
         grey: import("./colors").GreyColor;
         blue: import("./colors").BaseColor;
         green: import("./colors").BaseColor;
@@ -49,7 +49,7 @@ export declare const palette: {
         red: import("./colors").BaseColor;
         yellow: import("./colors").BaseColor;
     } | undefined;
-    token: {
+    lunit_token: {
         core: {
             bg_01: string;
             bg_02: string;

package/dist/types/index.d.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";
 export { default as Button } from "./components/Button";

package/dist/types/theme.d.ts

@@ -1,2 +1,4 @@
+import { ThemeOptions } from "@mui/material";
+export declare const themeOptions: ThemeOptions;
 declare const theme: import("@mui/material").Theme;
 export default theme;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lunit/design-system",
-  "version": "1.0.0-a.5",
+  "version": "1.0.0-b.1",
   "description": "Lunit Design System",
   "main": "dist/cjs/index.js",
   "module": "dist/index.js",

package/src/components/Alert/Alert.styled.ts

@@ -50,12 +50,12 @@ export const StyledAlertTitle = styled(MuiAlertTitle)(({ theme }) => ({
     fontWeight: 700,
     fontSize: "14px",
     lineHeight: "20px",
-    color: theme.palette.token.core.text_normal,
+    color: theme.palette.lunit_token.core.text_normal,
   },
 }));
 
 export const StyledAlertChildren = styled("div")(({ theme }) => ({
-  color: theme.palette.token.core.text_normal,
+  color: theme.palette.lunit_token.core.text_normal,
 }));
 
 export const StyledBottomAction = styled("div")({

package/src/components/Alert/Alert.utils.ts

@@ -6,13 +6,13 @@ export const getBackgroundColor = (
 ) => {
   switch (severity) {
     case "info":
-      return theme.palette.token.component.alert_info_bg;
+      return theme.palette.lunit_token.component.alert_info_bg;
     case "warning":
-      return theme.palette.token.component.alert_warning_bg;
+      return theme.palette.lunit_token.component.alert_warning_bg;
     case "error":
-      return theme.palette.token.component.alert_error_bg;
+      return theme.palette.lunit_token.component.alert_error_bg;
     default:
-      return theme.palette.token.component.alert_success_bg;
+      return theme.palette.lunit_token.component.alert_success_bg;
   }
 };
 
@@ -22,13 +22,13 @@ export const getBorderColor = (
 ) => {
   switch (severity) {
     case "info":
-      return theme.palette.token.component.alert_info_border;
+      return theme.palette.lunit_token.component.alert_info_border;
     case "warning":
-      return theme.palette.token.component.alert_warning_border;
+      return theme.palette.lunit_token.component.alert_warning_border;
     case "error":
-      return theme.palette.token.component.alert_error_border;
+      return theme.palette.lunit_token.component.alert_error_border;
     default:
-      return theme.palette.token.component.alert_success_border;
+      return theme.palette.lunit_token.component.alert_success_border;
   }
 };
 
@@ -38,12 +38,12 @@ export const getIconColor = (
 ) => {
   switch (severity) {
     case "info":
-      return theme.palette.token.core.icon_info_02;
+      return theme.palette.lunit_token.core.icon_info_02;
     case "warning":
-      return theme.palette.token.core.icon_warning_02;
+      return theme.palette.lunit_token.core.icon_warning_02;
     case "error":
-      return theme.palette.token.core.icon_error_02;
+      return theme.palette.lunit_token.core.icon_error_02;
     default:
-      return theme.palette.token.core.icon_success_02;
+      return theme.palette.lunit_token.core.icon_success_02;
   }
 };

package/src/components/Button/Button.styled.ts

@@ -12,7 +12,7 @@ import type { ToggleButtonProps } from "../ToggleButton/ToggleButton.types";
 import type { Typography } from "@mui/material/styles/createTypography";
 
 type KindStyleParams = Pick<ButtonProps, "kind" | "color"> & {
-  token: ColorToken;
+  lunit_token: ColorToken;
 };
 
 type CustomButtonProps = ButtonProps & { hasIconOnly: boolean };
@@ -64,79 +64,79 @@ export const sizeStyle = ({
   }),
 });
 
-export const kindStyle = ({ kind, color, token }: KindStyleParams) => ({
+export const kindStyle = ({ kind, color, lunit_token }: KindStyleParams) => ({
   // kind: container
   ...(kind === "contained" &&
     color === "primary" && {
-      color: token.component.btn_primary_text_2,
-      backgroundColor: token.component.btn_primary_bg,
-      "&:hover": getHoverStyle(token.component.btn_primary_bg),
+      color: lunit_token.component.btn_primary_text_2,
+      backgroundColor: lunit_token.component.btn_primary_bg,
+      "&:hover": getHoverStyle(lunit_token.component.btn_primary_bg),
       "&.Mui-disabled": {
         opacity: 0.38,
         border: "none",
-        color: token.component.btn_primary_text_2,
+        color: lunit_token.component.btn_primary_text_2,
       },
     }),
   ...(kind === "contained" &&
     color === "secondary" && {
-      color: token.component.btn_secondary_text,
-      backgroundColor: token.component.btn_secondary_bg,
-      "&:hover": getHoverStyle(token.component.btn_secondary_bg),
+      color: lunit_token.component.btn_secondary_text,
+      backgroundColor: lunit_token.component.btn_secondary_bg,
+      "&:hover": getHoverStyle(lunit_token.component.btn_secondary_bg),
       "&.Mui-disabled": {
         opacity: 0.38,
         border: "none",
-        color: token.component.btn_secondary_text,
+        color: lunit_token.component.btn_secondary_text,
       },
     }),
   ...(kind === "contained" &&
     color === "error" && {
-      color: token.component.btn_primary_text_2,
-      backgroundColor: token.component.btn_error_bg,
-      "&:hover": getHoverStyle(token.component.btn_error_bg),
+      color: lunit_token.component.btn_primary_text_2,
+      backgroundColor: lunit_token.component.btn_error_bg,
+      "&:hover": getHoverStyle(lunit_token.component.btn_error_bg),
       "&.Mui-disabled": {
         opacity: 0.38,
         border: "none",
-        color: token.component.btn_primary_text_2,
+        color: lunit_token.component.btn_primary_text_2,
       },
     }),
   // kind: ghost
   ...(kind === "ghost" &&
     color === "primary" && {
-      color: token.component.btn_primary_text_1,
+      color: lunit_token.component.btn_primary_text_1,
       border: "none",
       "&:hover": getHoverStyle("none"),
       "&.Mui-disabled": {
         opacity: 0.38,
         border: "none",
-        color: token.component.btn_primary_text_1,
+        color: lunit_token.component.btn_primary_text_1,
       },
     }),
   ...(kind === "ghost" &&
     color === "secondary" && {
-      color: token.component.btn_secondary_text,
+      color: lunit_token.component.btn_secondary_text,
       border: "none",
       "&:hover": getHoverStyle("none"),
       "&.Mui-disabled": {
         opacity: 0.38,
         border: "none",
-        color: token.component.btn_secondary_text,
+        color: lunit_token.component.btn_secondary_text,
       },
     }),
   ...(kind === "ghost" &&
     color === "error" && {
-      color: token.component.btn_error_text,
+      color: lunit_token.component.btn_error_text,
       "&:hover": getHoverStyle("none"),
       "&.Mui-disabled": {
         opacity: 0.38,
         border: "none",
-        color: token.component.btn_error_text,
+        color: lunit_token.component.btn_error_text,
       },
     }),
   // kind: outlined
   ...(kind === "outlined" &&
     color === "primary" && {
-      color: token.component.btn_primary_text_1,
-      border: `${OUTLINED_BORDER_WIDTH}px solid ${token.component.btn_primary_border}`,
+      color: lunit_token.component.btn_primary_text_1,
+      border: `${OUTLINED_BORDER_WIDTH}px solid ${lunit_token.component.btn_primary_border}`,
       "&:hover": getHoverStyle("none"),
       "&:hover:before": {
         content: "''",
@@ -146,18 +146,18 @@ export const kindStyle = ({ kind, color, token }: KindStyleParams) => ({
         width: "calc(100% + 2px)",
         height: "calc(100% + 2px)",
         zIndex: -1,
-        backgroundColor: token.core.hover,
+        backgroundColor: lunit_token.core.hover,
         borderRadius,
       },
       "&.Mui-disabled": {
         opacity: 0.38,
-        color: token.component.btn_primary_text_1,
+        color: lunit_token.component.btn_primary_text_1,
       },
     }),
   ...(kind === "outlined" &&
     color === "secondary" && {
-      color: token.component.btn_secondary_text,
-      border: `${OUTLINED_BORDER_WIDTH}px solid ${token.component.btn_secondary_border}`,
+      color: lunit_token.component.btn_secondary_text,
+      border: `${OUTLINED_BORDER_WIDTH}px solid ${lunit_token.component.btn_secondary_border}`,
       "&:hover": getHoverStyle("none"),
       "&:hover:before": {
         content: "''",
@@ -167,17 +167,17 @@ export const kindStyle = ({ kind, color, token }: KindStyleParams) => ({
         width: "calc(100% + 2px)",
         height: "calc(100% + 2px)",
         zIndex: -1,
-        backgroundColor: token.core.hover,
+        backgroundColor: lunit_token.core.hover,
         borderRadius,
       },
       "&.Mui-disabled": {
         opacity: 0.38,
-        color: token.component.btn_secondary_text,
+        color: lunit_token.component.btn_secondary_text,
       },
     }),
 });
 
-export const commonStyle = ({ token }: { token: ColorToken }) =>
+export const commonStyle = ({ lunit_token }: { lunit_token: ColorToken }) =>
   ({
     fontWeight: "500",
     borderRadius,
@@ -189,7 +189,7 @@ export const commonStyle = ({ token }: { token: ColorToken }) =>
         height: `calc(100% + ${PADDING_OF_FOCUS}px)`,
         content: '""',
         borderRadius: "11px",
-        border: `1px solid ${token.core.focused}`,
+        border: `1px solid ${lunit_token.core.focused}`,
         boxSizing: "border-box",
       },
     },
@@ -201,7 +201,7 @@ export const commonStyle = ({ token }: { token: ColorToken }) =>
       width: "100%",
       height: "100%",
       zIndex: -1,
-      backgroundColor: token.core.hover,
+      backgroundColor: lunit_token.core.hover,
       borderRadius,
     },
   } as const);
@@ -237,16 +237,16 @@ export const CustomButton = styled(MuiButton, {
   ({
     theme: {
       typography,
-      palette: { token },
+      palette: { lunit_token },
     },
     kind,
     size,
     color,
     hasIconOnly,
   }) => ({
-    ...commonStyle({ token }),
+    ...commonStyle({ lunit_token }),
     ...iconStyle({ size, hasIconOnly }),
     ...sizeStyle({ size, kind, hasIconOnly, typography }),
-    ...kindStyle({ kind, color, token }),
+    ...kindStyle({ kind, color, lunit_token }),
   })
 );

package/src/components/Checkbox/Checkbox.tsx

@@ -15,7 +15,7 @@ const CustomCheckbox = styled(MuiCheckbox)(({ theme }) => ({
     position: "absolute",
     width: 24,
     height: 24,
-    border: `1px solid ${theme.palette.token.core.focused}`,
+    border: `1px solid ${theme.palette.lunit_token.core.focused}`,
     borderRadius: "7px",
   },
 }));
@@ -27,7 +27,7 @@ const iconSize = {
 
 const DefaultIcon = styled("span")(({ theme }) => ({
   ...iconSize,
-  backgroundColor: theme.palette.token.component.selectcontrol_off,
+  backgroundColor: theme.palette.lunit_token.component.selectcontrol_off,
   maskImage:
     "url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath" +
     " fill-rule='evenodd' clip-rule='evenodd' d='M14 1.5H4C2.61929 1.5 1.5 2.61929 1.5 4V14C1.5 15.3807 2.61929 16.5 4 16.5H14C15.3807 " +
@@ -36,7 +36,7 @@ const DefaultIcon = styled("span")(({ theme }) => ({
 
 const CheckedIcon = styled("span")(({ theme }) => ({
   ...iconSize,
-  backgroundColor: theme.palette.token.component.selectcontrol_on,
+  backgroundColor: theme.palette.lunit_token.component.selectcontrol_on,
   maskImage:
     "url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath" +
     " fill-rule='evenodd' clip-rule='evenodd' d='M4 0C1.79086 0 0 1.79086 0 4V14C0 16.2091 1.79086 18 4 18H14C16.2091 18 18 16.2091 18 14V4C18 1.79086 16.2091 0 14 0H4ZM14.2516 " +
@@ -45,7 +45,7 @@ const CheckedIcon = styled("span")(({ theme }) => ({
 
 const IndeterminateIcon = styled("span")(({ theme }) => ({
   ...iconSize,
-  backgroundColor: theme.palette.token.component.selectcontrol_on,
+  backgroundColor: theme.palette.lunit_token.component.selectcontrol_on,
   maskImage:
     "url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath" +
     " fill-rule='evenodd' clip-rule='evenodd' d='M4 0C1.79086 0 0 1.79086 0 4V14C0 16.2091 1.79086 18 4 18H14C16.2091 18 18 16.2091 18 14V4C18 1.79086 16.2091 0 " +

package/src/components/Chip/Chip.styled.ts

@@ -36,32 +36,32 @@ const getColorToken = (
   if (token === "text") {
     switch (color) {
       case CHIP_COLORS.PRIMARY:
-        return theme.palette.token.component.chip_primary_text;
+        return theme.palette.lunit_token.component.chip_primary_text;
       case CHIP_COLORS.SECONDARY:
-        return theme.palette.token.component.chip_secondary_text;
+        return theme.palette.lunit_token.component.chip_secondary_text;
       case CHIP_COLORS.ERROR:
-        return theme.palette.token.component.chip_error_text;
+        return theme.palette.lunit_token.component.chip_error_text;
       case CHIP_COLORS.WARNING:
-        return theme.palette.token.component.chip_warning_text;
+        return theme.palette.lunit_token.component.chip_warning_text;
       case CHIP_COLORS.SUCCESS:
-        return theme.palette.token.component.chip_success_text;
+        return theme.palette.lunit_token.component.chip_success_text;
       default:
-        return theme.palette.token.component.chip_primary_text;
+        return theme.palette.lunit_token.component.chip_primary_text;
     }
   } else {
     switch (color) {
       case CHIP_COLORS.PRIMARY:
-        return theme.palette.token.component.chip_primary_bg;
+        return theme.palette.lunit_token.component.chip_primary_bg;
       case CHIP_COLORS.SECONDARY:
-        return theme.palette.token.component.chip_secondary_bg;
+        return theme.palette.lunit_token.component.chip_secondary_bg;
       case CHIP_COLORS.ERROR:
-        return theme.palette.token.component.chip_error_bg;
+        return theme.palette.lunit_token.component.chip_error_bg;
       case CHIP_COLORS.WARNING:
-        return theme.palette.token.component.chip_warning_bg;
+        return theme.palette.lunit_token.component.chip_warning_bg;
       case CHIP_COLORS.SUCCESS:
-        return theme.palette.token.component.chip_success_bg;
+        return theme.palette.lunit_token.component.chip_success_bg;
       default:
-        return theme.palette.token.component.chip_primary_bg;
+        return theme.palette.lunit_token.component.chip_primary_bg;
     }
   }
 };
@@ -82,7 +82,7 @@ export const StyledContainedChipBase = styled(MuiChip, {
   ...COMMON_STYLES,
   ...theme.typography.caption,
 
-  color: theme.palette.token.core.text_normal,
+  color: theme.palette.lunit_token.core.text_normal,
   backgroundColor: getColorToken("bg", theme, color),
 
   "& .MuiSvgIcon-root": {
@@ -134,7 +134,7 @@ export const StyledContainedChipEnable = styled(StyledContainedChipBase, {
     left: 0,
     right: 0,
     bottom: 0,
-    backgroundColor: theme.palette.token.core.hover,
+    backgroundColor: theme.palette.lunit_token.core.hover,
     borderRadius: "11px",
   },
 }));
@@ -155,7 +155,7 @@ export const StyledContainedChipDeletable = styled(
     right: 0,
     bottom: 0,
     opacity: 0,
-    color: theme.palette.token.core.hover,
+    color: theme.palette.lunit_token.core.hover,
     ":hover": {
       cursor: "pointer",
       opacity: 1,

package/src/components/Radio/Radio.tsx

@@ -13,7 +13,7 @@ const CustomRadio = styled(MuiRadio)(({ theme }) => ({
     display: "block",
     width: 24,
     height: 24,
-    backgroundColor: theme.palette.token.core.focused,
+    backgroundColor: theme.palette.lunit_token.core.focused,
     maskImage:
       "url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath" +
       " fill-rule='evenodd' clip-rule='evenodd' d='M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 " +
@@ -28,7 +28,7 @@ const iconSize = {
 
 const DefaultIcon = styled("span")(({ theme }) => ({
   ...iconSize,
-  backgroundColor: theme.palette.token.component.selectcontrol_off,
+  backgroundColor: theme.palette.lunit_token.component.selectcontrol_off,
   maskImage:
     "url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath" +
     " fill-rule='evenodd' clip-rule='evenodd' d='M10 17.5C14.1421 17.5 17.5 14.1421 17.5 10C17.5 5.85786 14.1421 2.5 10 2.5C5.85786 2.5 2.5 5.85786 2.5 10C2.5 14.1421 5.85786 17.5 " +
@@ -37,7 +37,7 @@ const DefaultIcon = styled("span")(({ theme }) => ({
 
 const CheckedIcon = styled("span")(({ theme }) => ({
   ...iconSize,
-  backgroundColor: theme.palette.token.component.selectcontrol_on,
+  backgroundColor: theme.palette.lunit_token.component.selectcontrol_on,
   maskImage:
     "url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath" +
     " fill-rule='evenodd' clip-rule='evenodd' d='M10 15C12.7614 15 15 12.7614 15 10C15 7.23858 12.7614 5 10 5C7.23858 5 5" +