@lunit/design-system 1.0.0-b.4 → 2.0.0

package/dist/types/components/TextField/TextField.types.d.ts

@@ -1,12 +1,17 @@
 /// <reference types="react" />
 import type { SxProps } from "@mui/material";
-import type { OutlinedTextFieldProps } from "@mui/material/TextField";
+import type { TextFieldProps as MuiTextFieldProps, OutlinedTextFieldProps } from "@mui/material/TextField";
 export type TextFieldSize = "small" | "medium" | "large";
 export interface BaseTextFieldProps extends Omit<OutlinedTextFieldProps, "size" | "value" | "helperText" | "variant"> {
     /**
-     * The design system TextField variable is outlined fixed.
+     * The design system TextField has only on kind, which is "contained"
+      Below are all return same kind "contained"
+      <TextField variant="outlined" />
+      <TextField variant="contained" />
+      <TextField variant="filled" />
+      <TextField variant="standard" />
      */
-    variant?: "outlined";
+    variant?: MuiTextFieldProps["variant"];
     value?: string;
     helperText?: string;
     /**

package/dist/types/components/Toast/Toast.utils.d.ts

@@ -1,2 +1,2 @@
 import type { AlertColor, Theme } from "@mui/material";
-export declare const getIconColor: (theme: Theme, severity: AlertColor | undefined) => import("csstype").Property.Color | undefined;
+export declare const getIconColor: (theme: Theme, severity: AlertColor | undefined) => string;

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?: "success" | "info" | "warning" | "error" | "standard" | "primary" | "secondary" | undefined;
+    color?: "primary" | "secondary" | "success" | "info" | "warning" | "error" | "standard" | undefined;
     disabled?: boolean | undefined;
     disableFocusRipple?: boolean | undefined;
     fullWidth?: boolean | undefined;
@@ -34,7 +34,7 @@ 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 | "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, {}, {}>;
+}, "color" | keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "tabIndex" | "onChange" | "onClick" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "value" | "disableFocusRipple" | "fullWidth" | "size" | "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 declare const IconWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
     hasIconOnly: boolean;

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

@@ -19,7 +19,7 @@ export declare const elevationOptions: {
     shadow4: string;
 };
 export declare const createElevationCssBaseline: () => {
-    ".light1, .light2, .dark1, .dark2, .dark3, .dark4": {
+    ".light1, .light2, .dark1, .dark2": {
         "--elevation-shadow": string;
         elevation_00: string;
         elevation_01: string;

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

@@ -72,7 +72,7 @@ export declare const createTypographyCssBaseline: () => {
         "--headline2-line-height": "65px";
         "--headline3-font-weight": "var(--font-weight-semibold)";
         "--headline3-font-size": "24px";
-        "--headline3-line-height": "57px";
+        "--headline3-line-height": "29px";
         "--headline4-font-weight": "var(--font-weight-semibold)";
         "--headline4-font-size": "20px";
         "--headline4-line-height": "28px";
@@ -84,5 +84,17 @@ export declare const createTypographyCssBaseline: () => {
         "--font-weight-medium": 500;
         "--font-weight-regular": 400;
     };
+    ".light1": {
+        color: string;
+    };
+    ".light2": {
+        color: string;
+    };
+    ".dark1": {
+        color: string;
+    };
+    ".dark2": {
+        color: string;
+    };
 };
 export default typographyOptions;

package/dist/types/foundation/Typography/tokens.d.ts

@@ -42,7 +42,7 @@ export declare const cssVariables: {
     "--headline2-line-height": "65px";
     "--headline3-font-weight": "var(--font-weight-semibold)";
     "--headline3-font-size": "24px";
-    "--headline3-line-height": "57px";
+    "--headline3-line-height": "29px";
     "--headline4-font-weight": "var(--font-weight-semibold)";
     "--headline4-font-size": "20px";
     "--headline4-line-height": "28px";

package/dist/types/foundation/colors/base/grey.d.ts

@@ -4,6 +4,7 @@ export declare const grey: {
     10: string;
     15: string;
     20: string;
+    25: string;
     30: string;
     40: string;
     50: string;
@@ -22,6 +23,7 @@ export declare const greyText: {
     10: string;
     15: string;
     20: string;
+    25: string;
     30: string;
     40: string;
     50: string;

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

@@ -51,12 +51,6 @@ export declare const createColorCssBaseline: () => {
     ".dark2": {
         [x: string]: string;
     };
-    ".dark3": {
-        [x: string]: string;
-    };
-    ".dark4": {
-        [x: string]: string;
-    };
 };
 declare const paletteOptions: {
     primary: {
@@ -93,6 +87,10 @@ declare const paletteOptions: {
         A400: string;
         A700: string;
     };
+    text: {
+        primary: string;
+        secondary: string;
+    };
     lunit_global: {
         grey: GreyColor;
         blue: BaseColor;
@@ -110,6 +108,7 @@ declare const paletteOptions: {
             bg_01: string;
             bg_02: string;
             bg_03: string;
+            layer_01: string;
             text_primary: string;
             text_normal: string;
             text_medium: string;
@@ -132,6 +131,8 @@ declare const paletteOptions: {
             shadow_02: string;
             shadow_03: string;
             shadow_04: string;
+            border_light: string;
+            border_medium: string;
         };
         component: {
             btn_primary_bg: string;
@@ -147,6 +148,8 @@ declare const paletteOptions: {
             btn_selected_primary_text: string;
             btn_selected_secondary_bg: string;
             btn_selected_secondary_text: string;
+            btn_selected_tertiary_bg: string;
+            btn_selected_tertiary_text: string;
             selectcontrol_on: string;
             selectcontrol_off: string;
             selectcontrol_handler: string;

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

@@ -3,6 +3,4 @@ export interface ColorTokenValueBySurface {
     light2: string;
     dark1: string;
     dark2: string;
-    dark3: string;
-    dark4: string;
 }

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

@@ -1,82 +1,84 @@
-/// <reference types="react" />
-type CSSPropertyColor = React.CSSProperties["color"];
 export interface ColorToken {
     core: {
-        bg_01: CSSPropertyColor;
-        bg_02: CSSPropertyColor;
-        bg_03: CSSPropertyColor;
-        text_primary: CSSPropertyColor;
-        text_normal: CSSPropertyColor;
-        text_medium: CSSPropertyColor;
-        text_light: CSSPropertyColor;
-        text_error: CSSPropertyColor;
-        text_success: CSSPropertyColor;
-        text_warning: CSSPropertyColor;
-        text_info: CSSPropertyColor;
-        link_primary: CSSPropertyColor;
-        link_hover: CSSPropertyColor;
-        link_visited: CSSPropertyColor;
-        icon_error_02: CSSPropertyColor;
-        icon_success_02: CSSPropertyColor;
-        icon_warning_02: CSSPropertyColor;
-        icon_info_02: CSSPropertyColor;
-        hover: CSSPropertyColor;
-        focused: CSSPropertyColor;
-        selected: CSSPropertyColor;
-        shadow_01: CSSPropertyColor;
-        shadow_02: CSSPropertyColor;
-        shadow_03: CSSPropertyColor;
-        shadow_04: CSSPropertyColor;
+        bg_01: string;
+        bg_02: string;
+        bg_03: string;
+        layer_01: string;
+        text_primary: string;
+        text_normal: string;
+        text_medium: string;
+        text_light: string;
+        text_error: string;
+        text_success: string;
+        text_warning: string;
+        text_info: string;
+        link_primary: string;
+        link_hover: string;
+        link_visited: string;
+        icon_error_02: string;
+        icon_success_02: string;
+        icon_warning_02: string;
+        icon_info_02: string;
+        hover: string;
+        focused: string;
+        selected: string;
+        shadow_01: string;
+        shadow_02: string;
+        shadow_03: string;
+        shadow_04: string;
+        border_light: string;
+        border_medium: string;
     };
     component: {
-        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;
-        btn_selected_secondary_text: CSSPropertyColor;
-        selectcontrol_on: CSSPropertyColor;
-        selectcontrol_off: CSSPropertyColor;
-        selectcontrol_handler: CSSPropertyColor;
-        selectcontrol_handler_shadow: CSSPropertyColor;
-        textfield_bg: CSSPropertyColor;
-        textfield_border_error: CSSPropertyColor;
-        dropdown_divider_border: CSSPropertyColor;
-        datatable_border_01: CSSPropertyColor;
-        datatable_border_02: CSSPropertyColor;
-        datatable_zebra: CSSPropertyColor;
-        scrollbars_bg: CSSPropertyColor;
-        scrollbars_hover: CSSPropertyColor;
-        scrollbars_pressed: CSSPropertyColor;
-        modal_overlay: CSSPropertyColor;
-        tooltip_bg: CSSPropertyColor;
-        tooltip_text_normal: CSSPropertyColor;
-        tooltip_text_medium: CSSPropertyColor;
-        alert_error_bg: CSSPropertyColor;
-        alert_error_border: CSSPropertyColor;
-        alert_success_bg: CSSPropertyColor;
-        alert_success_border: CSSPropertyColor;
-        alert_info_bg: CSSPropertyColor;
-        alert_info_border: CSSPropertyColor;
-        alert_warning_bg: CSSPropertyColor;
-        alert_warning_border: CSSPropertyColor;
-        chip_primary_bg: CSSPropertyColor;
-        chip_primary_text: CSSPropertyColor;
-        chip_secondary_bg: CSSPropertyColor;
-        chip_secondary_text: CSSPropertyColor;
-        chip_error_bg: CSSPropertyColor;
-        chip_error_text: CSSPropertyColor;
-        chip_warning_bg: CSSPropertyColor;
-        chip_warning_text: CSSPropertyColor;
-        chip_success_bg: CSSPropertyColor;
-        chip_success_text: CSSPropertyColor;
+        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;
+        btn_selected_secondary_text: string;
+        btn_selected_tertiary_bg: string;
+        btn_selected_tertiary_text: string;
+        selectcontrol_on: string;
+        selectcontrol_off: string;
+        selectcontrol_handler: string;
+        selectcontrol_handler_shadow: string;
+        textfield_bg: string;
+        textfield_border_error: string;
+        dropdown_divider_border: string;
+        datatable_border_01: string;
+        datatable_border_02: string;
+        datatable_zebra: string;
+        scrollbars_bg: string;
+        scrollbars_hover: string;
+        scrollbars_pressed: string;
+        modal_overlay: string;
+        tooltip_bg: string;
+        tooltip_text_normal: string;
+        tooltip_text_medium: string;
+        alert_error_bg: string;
+        alert_error_border: string;
+        alert_success_bg: string;
+        alert_success_border: string;
+        alert_info_bg: string;
+        alert_info_border: string;
+        alert_warning_bg: string;
+        alert_warning_border: string;
+        chip_primary_bg: string;
+        chip_primary_text: string;
+        chip_secondary_bg: string;
+        chip_secondary_text: string;
+        chip_error_bg: string;
+        chip_error_text: string;
+        chip_warning_bg: string;
+        chip_warning_text: string;
+        chip_success_bg: string;
+        chip_success_text: string;
     };
 }
-export {};

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

@@ -38,6 +38,10 @@ export declare const palette: {
         A400: string;
         A700: string;
     };
+    text: {
+        primary: string;
+        secondary: string;
+    };
     lunit_global: {
         grey: import("./colors").GreyColor;
         blue: import("./colors").BaseColor;
@@ -55,6 +59,7 @@ export declare const palette: {
             bg_01: string;
             bg_02: string;
             bg_03: string;
+            layer_01: string;
             text_primary: string;
             text_normal: string;
             text_medium: string;
@@ -77,6 +82,8 @@ export declare const palette: {
             shadow_02: string;
             shadow_03: string;
             shadow_04: string;
+            border_light: string;
+            border_medium: string;
         };
         component: {
             btn_primary_bg: string;
@@ -92,6 +99,8 @@ export declare const palette: {
             btn_selected_primary_text: string;
             btn_selected_secondary_bg: string;
             btn_selected_secondary_text: string;
+            btn_selected_tertiary_bg: string;
+            btn_selected_tertiary_text: string;
             selectcontrol_on: string;
             selectcontrol_off: string;
             selectcontrol_handler: string;

package/dist/types/index.d.ts

@@ -4,11 +4,11 @@ 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 Dialog } from "./components/Dialog";
 export { default as DataTable } from "./components/DataTable";
 export { default as DatePicker } from "./components/DatePicker";
 export { default as Dropdown } from "./components/Dropdown";
 export { default as FormLabel } from "./components/FormLabel";
-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";

package/package.json

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

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

@@ -157,7 +157,7 @@ export const kindStyle = ({ kind, color, lunit_token }: KindStyleParams) => ({
   ...(kind === "outlined" &&
     color === "secondary" && {
       color: lunit_token.component.btn_secondary_text,
-      border: `${OUTLINED_BORDER_WIDTH}px solid ${lunit_token.component.btn_secondary_border}`,
+      border: `${OUTLINED_BORDER_WIDTH}px solid ${lunit_token.core.border_medium}`,
       "&:hover": getHoverStyle("none"),
       "&:hover:before": {
         content: "''",
@@ -211,21 +211,18 @@ export const iconStyle = ({
   hasIconOnly,
 }: Pick<CustomButtonProps, "size" | "hasIconOnly">) => ({
   "& .MuiButton-startIcon": {
-    width: "20px",
-    height: "20px",
-    padding: "1px",
     margin: 0,
     marginRight: hasIconOnly ? "0px" : size === "large" ? "8px" : "4px",
 
     "*:nth-of-type(1)": {
-      fontSize: "18px",
+      fontSize: "20px",
     },
   },
 });
 
 export const CustomButton = styled(MuiButton, {
   shouldForwardProp: (prop: string) => {
-    return !["kind", "hasIconOnly"].includes(prop);
+    return !["kind", "hasIconOnly", "variant"].includes(prop);
   },
 })<CustomButtonProps>(
   ({

package/src/components/Button/Button.tsx

@@ -2,54 +2,36 @@ import React, { forwardRef } from "react";
 
 import { CustomButton } from "./Button.styled";
 
-import type { ButtonType, ButtonProps } from "./Button.types";
+import type {
+  ButtonType,
+  ButtonProps,
+  GhostButtonProps,
+  OutlinedButtonProps,
+  ContainedButtonProps,
+} from "./Button.types";
 
 const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
-  const {
-    size = "small",
-    color = "primary",
-    icon,
-    className,
-    children,
-    startIcon,
-    ...buttonProps
-  } = props;
+  const { kind, variant, icon, children, startIcon } = props;
   const hasIconOnly = Boolean((startIcon || icon) && !children);
 
+  if (kind === "outlined" || variant === "outlined") {
+    return <OutlinedButton {...props} ref={ref} hasIconOnly={hasIconOnly} />;
+  }
+
+  if (kind === "ghost" || variant === "text" || variant === "ghost") {
+    return <GhostButton {...props} ref={ref} hasIconOnly={hasIconOnly} />;
+  }
+
   return (
-    <>
-      {/** props.kind 사용 이유: props.color 내 타입 좁히기 활용을 위해 사용 */}
-      {props.kind === "outlined" ? (
-        <CustomButton
-          {...buttonProps}
-          ref={ref}
-          className={`outlined ${className ? className : ""}`}
-          kind="outlined"
-          color={props.color ?? "primary"}
-          size={size}
-          startIcon={startIcon || icon}
-          hasIconOnly={hasIconOnly}
-        >
-          {!hasIconOnly && <>{children}</>}
-        </CustomButton>
-      ) : (
-        <CustomButton
-          {...buttonProps}
-          ref={ref}
-          className={`${props.kind ?? "contained"} ${
-            className ? className : ""
-          }`}
-          kind={props.kind ?? "contained"}
-          color={props.color ?? "primary"}
-          size={size}
-          startIcon={startIcon || icon}
-          hasIconOnly={hasIconOnly}
-        >
-          {!hasIconOnly && <>{children}</>}
-        </CustomButton>
-      )}
-    </>
+    <ContainedButton
+      {...props}
+      kind="contained"
+      variant="contained"
+      ref={ref}
+      hasIconOnly={hasIconOnly}
+    />
   );
+
   /**
    * There is an issue between React 18, Mui's OverridableComponent type and the
    * type coercion to temporarily fix it.
@@ -57,4 +39,97 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
    */
 }) as ButtonType;
 
+const GhostButton = forwardRef<
+  HTMLButtonElement,
+  GhostButtonProps & { hasIconOnly: boolean }
+>((props, ref) => {
+  const {
+    size = "small",
+    icon,
+    className,
+    children,
+    startIcon,
+    hasIconOnly,
+    variant,
+    ...restProps
+  } = props;
+
+  return (
+    <CustomButton
+      {...restProps}
+      ref={ref}
+      className={`ghost ${className ? className : ""}`}
+      kind="ghost"
+      color={props.color ?? "primary"}
+      size={size}
+      startIcon={startIcon || icon}
+      hasIconOnly={hasIconOnly}
+    >
+      {!hasIconOnly && <>{children}</>}
+    </CustomButton>
+  );
+});
+
+const OutlinedButton = forwardRef<
+  HTMLButtonElement,
+  OutlinedButtonProps & { hasIconOnly: boolean }
+>((props, ref) => {
+  const {
+    size = "small",
+    icon,
+    className,
+    children,
+    startIcon,
+    hasIconOnly,
+    variant,
+    ...restProps
+  } = props;
+
+  return (
+    <CustomButton
+      {...restProps}
+      ref={ref}
+      className={`outlined ${className ? className : ""}`}
+      kind="outlined"
+      color={props.color ?? "primary"}
+      size={size}
+      startIcon={startIcon || icon}
+      hasIconOnly={hasIconOnly}
+    >
+      {!hasIconOnly && <>{children}</>}
+    </CustomButton>
+  );
+});
+
+const ContainedButton = forwardRef<
+  HTMLButtonElement,
+  ContainedButtonProps & { hasIconOnly: boolean }
+>((props, ref) => {
+  const {
+    size = "small",
+    icon,
+    className,
+    children,
+    startIcon,
+    hasIconOnly,
+    variant,
+    ...restProps
+  } = props;
+
+  return (
+    <CustomButton
+      {...restProps}
+      ref={ref}
+      className={`${props.kind ?? "contained"} ${className ? className : ""}`}
+      kind={props.kind ?? "contained"}
+      color={props.color ?? "primary"}
+      size={size}
+      startIcon={startIcon || icon}
+      hasIconOnly={hasIconOnly}
+    >
+      {!hasIconOnly && <>{children}</>}
+    </CustomButton>
+  );
+});
+
 export default Button;

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

@@ -8,22 +8,26 @@ import type { OverridableComponent } from "@mui/material/OverridableComponent";
  * TODO: Omit 을 사용할 경우 component prop 타입 추론이 안되는 이슈 발생
  * https://github.com/lunit-io/design-system/pull/133#discussion_r1354277785
  * */
-interface BaseButtonProps extends Omit<MuiButtonProps, "variant"> {
+export interface BaseButtonProps extends Omit<MuiButtonProps, "variant"> {
   icon?: React.ReactNode;
+  variant?: "contained" | "outlined" | "text" | "ghost";
 }
 
-interface ContainedButtonProps extends BaseButtonProps {
+export interface ContainedButtonProps extends BaseButtonProps {
   kind?: "contained";
+  variant?: "contained";
   color?: "primary" | "secondary" | "error";
 }
 
-interface GhostButtonProps extends BaseButtonProps {
+export interface GhostButtonProps extends BaseButtonProps {
   kind?: "ghost";
+  variant?: "text" | "ghost";
   color?: "primary" | "secondary" | "error";
 }
 
-interface OutlinedButtonProps extends BaseButtonProps {
+export interface OutlinedButtonProps extends BaseButtonProps {
   kind?: "outlined";
+  variant?: "outlined";
   color?: "primary" | "secondary";
 }