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

package/dist/types/foundation/colors/types.d.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/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;
@@ -78,17 +78,15 @@ export declare const palette: {
             shadow_04: string;
         };
         component: {
-            btn_contained_primary_bg: string;
-            btn_contained_primary_text: string;
-            btn_contained_secondary_bg: string;
-            btn_contained_secondary_text: string;
-            btn_contained_error_bg: string;
-            btn_contained_error_text: string;
-            btn_outlined_primary_border: string;
-            btn_outlined_primary_text: string;
-            btn_ghost_primary_text: string;
-            btn_ghost_secondary_text: string;
-            btn_ghost_error_text: string;
+            btn_primary_bg: string;
+            btn_secondary_bg: string;
+            btn_error_bg: string;
+            btn_primary_border: string;
+            btn_secondary_border: string;
+            btn_primary_text_1: string;
+            btn_primary_text_2: string;
+            btn_secondary_text: string;
+            btn_error_text: string;
             btn_selected_primary_bg: string;
             btn_selected_primary_text: string;
             btn_selected_secondary_bg: string;

package/dist/types/index.d.ts

@@ -1,8 +1,9 @@
-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";
@@ -11,7 +12,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/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.4",
+  "version": "1.0.0-b.1",
   "description": "Lunit Design System",
   "main": "dist/cjs/index.js",
   "module": "dist/index.js",
@@ -37,7 +37,7 @@
   "scripts": {
     "build:transpile": "tsc -p tsconfig.build.json",
     "build:cjs": "webpack -c webpack/cjs.config.js",
-    "build": "yarn build:transpile && yarn build:cjs",
+    "build": "npm run build:transpile && npm run build:cjs",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "chromatic": "chromatic"
@@ -48,6 +48,11 @@
         "dependsOn": [
           "^build"
         ]
+      },
+      "build-storybook": {
+        "dependsOn": [
+          "^build"
+        ]
       }
     }
   },
@@ -61,27 +66,27 @@
     "@mui/icons-material": "^5.11.3",
     "@mui/material": "^5.11.3",
     "@mui/utils": "^5.11.3",
-    "@mui/x-date-pickers": "^5.0.16",
-    "@storybook/addon-actions": "^7.0.6",
-    "@storybook/addon-essentials": "^7.0.6",
-    "@storybook/addon-interactions": "^7.0.6",
-    "@storybook/addon-links": "^7.0.6",
-    "@storybook/addon-storysource": "^7.0.6",
-    "@storybook/blocks": "^7.0.6",
-    "@storybook/react": "^7.0.6",
-    "@storybook/react-webpack5": "^7.0.6",
+    "@mui/x-date-pickers": "^5.0.20",
+    "@storybook/addon-actions": "^7.0.21",
+    "@storybook/addon-essentials": "^7.0.21",
+    "@storybook/addon-interactions": "^7.0.21",
+    "@storybook/addon-links": "^7.0.21",
+    "@storybook/addon-storysource": "^7.0.21",
+    "@storybook/blocks": "^7.0.21",
+    "@storybook/react": "^7.0.21",
+    "@storybook/react-webpack5": "^7.0.21",
     "@storybook/testing-library": "^0.1.0",
-    "@storybook/theming": "^7.0.6",
+    "@storybook/theming": "^7.0.21",
     "@types/lodash": "^4.14.182",
     "babel-loader": "^8.2.5",
     "chromatic": "^6.7.0",
     "dayjs": "^1.11.7",
     "lodash": "^4.17.21",
     "mustache": "^4.2.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "storybook": "^7.0.6",
-    "storybook-addon-pseudo-states": "^2.0.0",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "storybook": "^7.0.21",
+    "storybook-addon-pseudo-states": "^2.0.1",
     "ts-loader": "^9.3.0",
     "typescript": "^4.6.4",
     "webpack": "^5.72.0",

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,80 +64,100 @@ 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_contained_primary_text,
-      backgroundColor: token.component.btn_contained_primary_bg,
-      "&:hover": getHoverStyle(token.component.btn_contained_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_contained_primary_text,
+        color: lunit_token.component.btn_primary_text_2,
       },
     }),
   ...(kind === "contained" &&
     color === "secondary" && {
-      color: token.component.btn_contained_secondary_text,
-
-      backgroundColor: token.component.btn_contained_secondary_bg,
-      "&:hover": getHoverStyle(token.component.btn_contained_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_contained_secondary_text,
+        color: lunit_token.component.btn_secondary_text,
       },
     }),
   ...(kind === "contained" &&
     color === "error" && {
-      color: token.component.btn_contained_error_text,
-      backgroundColor: token.component.btn_contained_error_bg,
-      "&:hover": getHoverStyle(token.component.btn_contained_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_contained_error_text,
+        color: lunit_token.component.btn_primary_text_2,
       },
     }),
   // kind: ghost
   ...(kind === "ghost" &&
     color === "primary" && {
-      color: token.component.btn_ghost_primary_text,
+      color: lunit_token.component.btn_primary_text_1,
       border: "none",
       "&:hover": getHoverStyle("none"),
       "&.Mui-disabled": {
         opacity: 0.38,
         border: "none",
-        color: token.component.btn_ghost_primary_text,
+        color: lunit_token.component.btn_primary_text_1,
       },
     }),
   ...(kind === "ghost" &&
     color === "secondary" && {
-      color: token.component.btn_ghost_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_ghost_secondary_text,
+        color: lunit_token.component.btn_secondary_text,
       },
     }),
   ...(kind === "ghost" &&
     color === "error" && {
-      color: token.component.btn_ghost_error_text,
+      color: lunit_token.component.btn_error_text,
       "&:hover": getHoverStyle("none"),
       "&.Mui-disabled": {
         opacity: 0.38,
         border: "none",
-        color: token.component.btn_ghost_error_text,
+        color: lunit_token.component.btn_error_text,
       },
     }),
   // kind: outlined
   ...(kind === "outlined" &&
     color === "primary" && {
-      color: token.component.btn_outlined_primary_text,
-      border: `${OUTLINED_BORDER_WIDTH}px solid ${token.component.btn_outlined_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: "''",
+        position: "absolute",
+        left: "-1px",
+        top: "-1px",
+        width: "calc(100% + 2px)",
+        height: "calc(100% + 2px)",
+        zIndex: -1,
+        backgroundColor: lunit_token.core.hover,
+        borderRadius,
+      },
+      "&.Mui-disabled": {
+        opacity: 0.38,
+        color: lunit_token.component.btn_primary_text_1,
+      },
+    }),
+  ...(kind === "outlined" &&
+    color === "secondary" && {
+      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: "''",
@@ -147,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_outlined_primary_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,
@@ -169,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",
       },
     },
@@ -181,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);
@@ -217,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/Button/Button.tsx

@@ -6,7 +6,6 @@ import type { ButtonProps } from "./Button.types";
 
 const Button = (props: ButtonProps) => {
   const {
-    kind = "contained",
     size = "small",
     color = "primary",
     icon,
@@ -18,27 +17,30 @@ const Button = (props: ButtonProps) => {
 
   return (
     <>
-      {kind === "contained" || kind === "ghost" ? (
+      {/** props.kind 사용 이유: props.color 내 타입 좁히기 활용을 위해 사용 */}
+      {props.kind === "outlined" ? (
         <CustomButton
-          className={`${kind} ${className ? className : ""}`}
-          kind={kind}
-          color={color}
+          {...buttonProps}
+          className={`outlined ${className ? className : ""}`}
+          kind="outlined"
+          color={props.color ?? "primary"}
           size={size}
           startIcon={icon}
           hasIconOnly={hasIconOnly}
-          {...buttonProps}
         >
           {!hasIconOnly && <>{children}</>}
         </CustomButton>
       ) : (
         <CustomButton
-          className={`outlined ${className ? className : ""}`}
-          kind="outlined"
-          color="primary"
+          {...buttonProps}
+          className={`${props.kind ?? "contained"} ${
+            className ? className : ""
+          }`}
+          kind={props.kind ?? "contained"}
+          color={props.color ?? "primary"}
           size={size}
           startIcon={icon}
           hasIconOnly={hasIconOnly}
-          {...buttonProps}
         >
           {!hasIconOnly && <>{children}</>}
         </CustomButton>

package/src/components/Button/Button.types.ts

@@ -16,7 +16,7 @@ interface GhostButtonProps extends BaseButtonProps {
 
 interface OutlinedButtonProps extends BaseButtonProps {
   kind?: "outlined";
-  color?: "primary";
+  color?: "primary" | "secondary";
 }
 
 export type ButtonProps =

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" +