@lunit/design-system 1.0.0-a.4 → 1.0.0-a.5

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

@@ -68,76 +68,96 @@ export const kindStyle = ({ kind, color, 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: token.component.btn_primary_text_2,
+      backgroundColor: token.component.btn_primary_bg,
+      "&:hover": getHoverStyle(token.component.btn_primary_bg),
       "&.Mui-disabled": {
         opacity: 0.38,
         border: "none",
-        color: token.component.btn_contained_primary_text,
+        color: 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: token.component.btn_secondary_text,
+      backgroundColor: token.component.btn_secondary_bg,
+      "&:hover": getHoverStyle(token.component.btn_secondary_bg),
       "&.Mui-disabled": {
         opacity: 0.38,
         border: "none",
-        color: token.component.btn_contained_secondary_text,
+        color: 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: token.component.btn_primary_text_2,
+      backgroundColor: token.component.btn_error_bg,
+      "&:hover": getHoverStyle(token.component.btn_error_bg),
       "&.Mui-disabled": {
         opacity: 0.38,
         border: "none",
-        color: token.component.btn_contained_error_text,
+        color: token.component.btn_primary_text_2,
       },
     }),
   // kind: ghost
   ...(kind === "ghost" &&
     color === "primary" && {
-      color: token.component.btn_ghost_primary_text,
+      color: 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: token.component.btn_primary_text_1,
       },
     }),
   ...(kind === "ghost" &&
     color === "secondary" && {
-      color: token.component.btn_ghost_secondary_text,
+      color: 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: token.component.btn_secondary_text,
       },
     }),
   ...(kind === "ghost" &&
     color === "error" && {
-      color: token.component.btn_ghost_error_text,
+      color: token.component.btn_error_text,
       "&:hover": getHoverStyle("none"),
       "&.Mui-disabled": {
         opacity: 0.38,
         border: "none",
-        color: token.component.btn_ghost_error_text,
+        color: 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: token.component.btn_primary_text_1,
+      border: `${OUTLINED_BORDER_WIDTH}px solid ${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: token.core.hover,
+        borderRadius,
+      },
+      "&.Mui-disabled": {
+        opacity: 0.38,
+        color: 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}`,
       "&:hover": getHoverStyle("none"),
       "&:hover:before": {
         content: "''",
@@ -152,7 +172,7 @@ export const kindStyle = ({ kind, color, token }: KindStyleParams) => ({
       },
       "&.Mui-disabled": {
         opacity: 0.38,
-        color: token.component.btn_outlined_primary_text,
+        color: token.component.btn_secondary_text,
       },
     }),
 });

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/TextField/TextField.style.ts

@@ -71,6 +71,9 @@ const getTextFieldPaddingBySize = ({
 };
 
 const commonStyle = ({ token }: { token: ColorToken }) => ({
+  "&.MuiTextField-root": {
+    width: "100%",
+  },
   "& .MuiOutlinedInput-root": {
     borderRadius: "8px",
     width: "100%",

package/src/components/TextField/TextField.tsx

@@ -11,7 +11,7 @@ import type {
 
 const SingleTextField = (props: SingleTextFieldProps) => {
   const {
-    size,
+    size = "small",
     leftIcon,
     rightIcon,
     leftIconSx,
@@ -48,7 +48,7 @@ const SingleTextField = (props: SingleTextFieldProps) => {
 };
 
 const MultiTextField = ({
-  size,
+  size = "small",
   onChange,
   ...restProps
 }: MultiTextFieldProps) => {
@@ -58,7 +58,7 @@ const MultiTextField = ({
 const TextField = (props: TextFieldProps) => {
   const {
     rows,
-    size = "small",
+    size,
     multiline = false,
     variant = "outlined",
     ...restProps

package/src/components/TextField/TextField.types.ts

@@ -10,7 +10,7 @@ export interface BaseTextFieldProps
   /**
    * The design system TextField variable is outlined fixed.
    */
-  variant: "outlined";
+  variant?: "outlined";
   value?: string;
   helperText?: string;
 
@@ -21,7 +21,6 @@ export interface BaseTextFieldProps
 }
 
 export interface SingleTextFieldProps extends BaseTextFieldProps {
-  size: TextFieldSize;
   leftIcon?: JSX.Element;
   rightIcon?: JSX.Element;
   leftIconSx?: SxProps;
@@ -32,7 +31,6 @@ export interface SingleTextFieldProps extends BaseTextFieldProps {
 
 export interface MultiTextFieldProps extends BaseTextFieldProps {
   rows?: number | string;
-  size: TextFieldSize;
 }
 
 export type TextFieldProps = SingleTextFieldProps | MultiTextFieldProps;

package/src/components/Toast/Toast.tsx

@@ -18,6 +18,7 @@ const MAPPED_ICON = {
   error: <Error variant="filled" />,
 };
 
+// this forwardRef is required for using with Snackbar component
 const Toast = forwardRef<HTMLDivElement, ToastProps>((props, ref) => {
   const {
     severity = "normal",
@@ -62,5 +63,4 @@ const Toast = forwardRef<HTMLDivElement, ToastProps>((props, ref) => {
   );
 });
 
-// this forwardRef is required for using with Snackbar component
 export default Toast;

package/src/components/Toast/index.tsx

@@ -1 +1,2 @@
-export { default as Toast } from './Toast'
+export { default } from "./Toast";
+export type { ToastProps } from "./Toast.types";

package/src/components/Typography/index.ts

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

package/src/foundation/Typography/index.ts

@@ -24,11 +24,7 @@ declare module "@mui/material/styles" {
   interface TypographyVariantsOptions extends Partial<DSVariantsType> {}
 }
 
-type TypographyPropsVariantOverridesType = Record<DSVariants, true>;
-declare module "@mui/material/Typography" {
-  interface TypographyPropsVariantOverrides
-    extends TypographyPropsVariantOverridesType {}
-}
+export type TypographyPropsVariantOverridesType = Record<DSVariants, true>;
 
 const fontFamily = [
   "Pretendard",
@@ -93,4 +89,4 @@ export const createTypographyCssBaseline = () => {
   };
 };
 
-export default typographyOptions;
+export default typographyOptions;

package/src/foundation/colors/index.ts

@@ -197,17 +197,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

@@ -4,6 +4,7 @@ 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/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",