@lunit/design-system 1.0.0-b.3 → 1.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/Toggle/Toggle.d.ts

@@ -1,3 +1,3 @@
-import type { ToggleProps } from './Toggle.types';
+import type { ToggleProps } from "./Toggle.types";
 declare const Toggle: (props: ToggleProps) => import("react/jsx-runtime").JSX.Element;
 export default Toggle;

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: "small" | "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/Toggle/Toggle.types.d.ts

@@ -2,12 +2,12 @@ import type { SwitchProps } from "@mui/material";
 export interface ToggleProps extends Omit<SwitchProps, "size"> {
     /**
      * The size of the component.
-     * @default medium
+     * @default small
      */
-    size?: 'medium' | 'large';
+    size?: "small" | "large";
     /**
-    * If `true`, the component has consistent 'checked' value and change shape.
-    * @default false
-    */
+     * If `true`, the component has consistent 'checked' value and change shape.
+     * @default false
+     */
     indeterminate?: boolean;
 }

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

@@ -1,3 +1,3 @@
-import type { ToggleButtonProps } from "./ToggleButton.types";
-declare const ToggleButton: (props: ToggleButtonProps) => import("react/jsx-runtime").JSX.Element;
+import React from "react";
+declare const ToggleButton: React.ForwardRefExoticComponent<(Omit<import("./ToggleButton.types").ContainedToggleButtonProps, "ref"> | Omit<import("./ToggleButton.types").GhostToggleButtonProps, "ref"> | Omit<import("./ToggleButton.types").OutlinedToggleButtonProps, "ref">) & React.RefAttributes<HTMLButtonElement>>;
 export default ToggleButton;

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

@@ -36,4 +36,8 @@ export declare const CustomToggleButton: import("@emotion/styled").StyledCompone
     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, {}, {}>;
 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;
+    size: string;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export {};

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

@@ -1,20 +1,19 @@
 /// <reference types="react" />
 import type { ToggleButtonProps as MuiToggleButtonProps } from "@mui/material";
-interface ToggleButtonBaseProps extends Omit<MuiToggleButtonProps, "variant"> {
+export interface ToggleButtonBaseProps extends Omit<MuiToggleButtonProps, "variant"> {
     selectedColor?: "primary" | "secondary";
     icon?: React.ReactNode;
 }
-interface ContainedToggleButtonProps extends ToggleButtonBaseProps {
+export interface ContainedToggleButtonProps extends ToggleButtonBaseProps {
     kind?: "contained";
     color?: "primary" | "secondary";
 }
-interface GhostToggleButtonProps extends ToggleButtonBaseProps {
+export interface GhostToggleButtonProps extends ToggleButtonBaseProps {
     kind?: "ghost";
     color?: "primary" | "secondary";
 }
-interface OutlinedToggleButtonProps extends ToggleButtonBaseProps {
+export interface OutlinedToggleButtonProps extends ToggleButtonBaseProps {
     kind?: "outlined";
     color?: "primary";
 }
 export type ToggleButtonProps = ContainedToggleButtonProps | GhostToggleButtonProps | OutlinedToggleButtonProps;
-export {};

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

@@ -27,8 +27,7 @@ export declare const typographyDefaultProps: {
     };
 };
 export declare const createTypographyCssBaseline: () => {
-    html: {
-        fontFamily: string;
+    "*, *:before, *:after": {
         fontFeatureSettings: string;
     };
     ":root": {
@@ -70,10 +69,10 @@ export declare const createTypographyCssBaseline: () => {
         "--headline1-line-height": "68px";
         "--headline2-font-weight": "var(--font-weight-bold)";
         "--headline2-font-size": "38px";
-        "--headline2-line-height": "48px";
+        "--headline2-line-height": "65px";
         "--headline3-font-weight": "var(--font-weight-semibold)";
         "--headline3-font-size": "24px";
-        "--headline3-line-height": "36px";
+        "--headline3-line-height": "57px";
         "--headline4-font-weight": "var(--font-weight-semibold)";
         "--headline4-font-size": "20px";
         "--headline4-line-height": "28px";
@@ -85,5 +84,23 @@ export declare const createTypographyCssBaseline: () => {
         "--font-weight-medium": 500;
         "--font-weight-regular": 400;
     };
+    ".light1": {
+        color: string;
+    };
+    ".light2": {
+        color: string;
+    };
+    ".dark1": {
+        color: string;
+    };
+    ".dark2": {
+        color: string;
+    };
+    ".dark3": {
+        color: string;
+    };
+    ".dark4": {
+        color: string;
+    };
 };
 export default typographyOptions;

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

@@ -39,10 +39,10 @@ export declare const cssVariables: {
     "--headline1-line-height": "68px";
     "--headline2-font-weight": "var(--font-weight-bold)";
     "--headline2-font-size": "38px";
-    "--headline2-line-height": "48px";
+    "--headline2-line-height": "65px";
     "--headline3-font-weight": "var(--font-weight-semibold)";
     "--headline3-font-size": "24px";
-    "--headline3-line-height": "36px";
+    "--headline3-line-height": "57px";
     "--headline4-font-weight": "var(--font-weight-semibold)";
     "--headline4-font-size": "20px";
     "--headline4-line-height": "28px";

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

@@ -93,6 +93,10 @@ declare const paletteOptions: {
         A400: string;
         A700: string;
     };
+    text: {
+        primary: string;
+        secondary: string;
+    };
     lunit_global: {
         grey: GreyColor;
         blue: BaseColor;

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;

package/package.json

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

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

@@ -211,27 +211,18 @@ export const iconStyle = ({
   hasIconOnly,
 }: Pick<CustomButtonProps, "size" | "hasIconOnly">) => ({
   "& .MuiButton-startIcon": {
-    width: "20px",
-    height: "20px",
     margin: 0,
     marginRight: hasIconOnly ? "0px" : size === "large" ? "8px" : "4px",
 
-    // This style was added for Mui Button Svg Icon handling
     "*:nth-of-type(1)": {
       fontSize: "20px",
     },
   },
-  svg: {
-    width: "20px",
-    height: "20px",
-    margin: 0,
-    marginRight: hasIconOnly ? "0px" : size === "large" ? "8px" : "4px",
-  },
 });
 
 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

@@ -1,52 +1,135 @@
-import React from "react";
+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: ButtonType = (props: ButtonProps) => {
+const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
+  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 (
+    <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.
+   * https://github.com/lunit-io/design-system/pull/143#issuecomment-1831127232
+   */
+}) 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",
-    color = "primary",
     icon,
     className,
     children,
-    ...buttonProps
+    startIcon,
+    hasIconOnly,
+    variant,
+    ...restProps
   } = props;
-  const hasIconOnly = Boolean(icon && !children);
 
   return (
-    <>
-      {/** props.kind 사용 이유: props.color 내 타입 좁히기 활용을 위해 사용 */}
-      {props.kind === "outlined" ? (
-        <CustomButton
-          {...buttonProps}
-          className={`outlined ${className ? className : ""}`}
-          kind="outlined"
-          color={props.color ?? "primary"}
-          size={size}
-          startIcon={icon}
-          hasIconOnly={hasIconOnly}
-        >
-          {!hasIconOnly && <>{children}</>}
-        </CustomButton>
-      ) : (
-        <CustomButton
-          {...buttonProps}
-          className={`${props.kind ?? "contained"} ${
-            className ? className : ""
-          }`}
-          kind={props.kind ?? "contained"}
-          color={props.color ?? "primary"}
-          size={size}
-          startIcon={icon}
-          hasIconOnly={hasIconOnly}
-        >
-          {!hasIconOnly && <>{children}</>}
-        </CustomButton>
-      )}
-    </>
+    <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";
 }
 

package/src/components/Chip/Chip.tsx

@@ -19,8 +19,11 @@ import type {
 } from "./Chip.types";
 
 const Chip: ChipType = (props: ChipProps) => {
-  const { kind, onDelete, onClick, ...restProps } = props;
-  if (kind === "outlined") return <OutlinedChip {...props} />;
+  const { kind, variant, onDelete, onClick, ...restProps } = props;
+
+  const isOutlined = kind === "outlined" || variant === "outlined";
+
+  if (isOutlined) return <OutlinedChip {...props} />;
   else if (onClick) return <EnableContainedChip {...props} />;
   else if (onDelete) return <DeletableContainedChip {...props} />;
 
@@ -63,7 +66,7 @@ const getLabelMargin = (
 };
 
 const ReadOnlyContainedChip = (props: ReadOnlyContainedChipProps) => {
-  const { color = "primary", thumbnail, sx, ...restProps } = props;
+  const { color = "primary", thumbnail, sx, variant, ...restProps } = props;
 
   return (
     <StyledContainedChipBase
@@ -89,6 +92,7 @@ const EnableContainedChip = (props: EnableContainedChipProps) => {
     onDelete,
     onClick,
     sx,
+    variant,
     ...restProps
   } = props;
 
@@ -117,7 +121,14 @@ const DeleteIconWithHoverLayer = ({ onClick }: { onClick: () => void }) => {
   );
 };
 const DeletableContainedChip = (props: DeletableContainedChipProps) => {
-  const { color = "primary", thumbnail, onDelete, sx, ...restProps } = props;
+  const {
+    color = "primary",
+    thumbnail,
+    onDelete,
+    sx,
+    variant,
+    ...restProps
+  } = props;
 
   return (
     <StyledContainedChipDeletable

package/src/components/Chip/Chip.types.ts

@@ -6,6 +6,8 @@ import type {
 } from "@mui/material";
 import type { OverridableComponent } from "@mui/material/OverridableComponent";
 
+type DesignSystemChipKind = "outlined" | "contained";
+type DesignSystemAndMuiContainedChipKind = "filled" | "contained";
 type ColorKeys = keyof typeof CHIP_COLORS;
 export type ChipColor = (typeof CHIP_COLORS)[ColorKeys];
 export type ChipThumbnail = string | JSX.Element;
@@ -18,12 +20,16 @@ export interface BaseChipProps
     MuiChipProps,
     "label" | "sx" | "style" | "classes" | "onDelete"
   > {
-  kind?: "outlined" | "contained";
+  // either kind or variant
+  kind?: DesignSystemChipKind;
+  variant?: "outlined" | DesignSystemAndMuiContainedChipKind;
+  // mui variant = outlined | "filled" | undefined
   color?: ChipColor;
 }
 
 export interface OutlinedChipProps extends BaseChipProps {
   kind?: "outlined";
+  variant?: "outlined";
   onClick?: never;
   onDelete?: never;
 }
@@ -32,9 +38,10 @@ export interface BaseContainedChipProps
   extends BaseChipProps,
     Omit<
       MuiChipProps,
-      "color" | "size" | "variant" | "avatar" | "deleteIcon" | "icon"
+      "color" | "size" | "avatar" | "deleteIcon" | "icon" | "variant"
     > {
   kind?: "contained";
+  variant?: DesignSystemAndMuiContainedChipKind;
   thumbnail?: ChipThumbnail;
   onClick?: () => void;
 }

package/src/components/TextField/TextField.tsx

@@ -25,6 +25,7 @@ const SingleTextField = forwardRef<HTMLDivElement, SingleTextFieldProps>(
 
     return (
       <BaseTextField
+        variant="outlined"
         {...restProps}
         ref={ref}
         textFieldSize={size}
@@ -57,19 +58,19 @@ const SingleTextField = forwardRef<HTMLDivElement, SingleTextFieldProps>(
 const MultiTextField = forwardRef<HTMLDivElement, MultiTextFieldProps>(
   ({ size = "small", ...restProps }, ref) => {
     return (
-      <BaseTextField {...restProps} ref={ref} textFieldSize={size} multiline />
+      <BaseTextField
+        variant="outlined"
+        {...restProps}
+        ref={ref}
+        textFieldSize={size}
+        multiline
+      />
     );
   }
 );
 
 const TextField = forwardRef<HTMLDivElement, TextFieldProps>((props, ref) => {
-  const {
-    rows,
-    size,
-    multiline = false,
-    variant = "outlined",
-    ...restProps
-  } = props;
+  const { rows, size, multiline = false, variant, ...restProps } = props;
 
   return multiline ? (
     <MultiTextField
@@ -77,11 +78,10 @@ const TextField = forwardRef<HTMLDivElement, TextFieldProps>((props, ref) => {
       ref={ref}
       maxRows={Infinity}
       size={size}
-      variant={variant}
       rows={rows}
     />
   ) : (
-    <SingleTextField {...restProps} ref={ref} size={size} variant={variant} />
+    <SingleTextField {...restProps} ref={ref} size={size} />
   );
 });
 

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

@@ -1,5 +1,8 @@
 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
@@ -8,12 +11,16 @@ export interface BaseTextFieldProps
     "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;
-
   /**
    * @default "small"
    */

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

@@ -1,10 +1,10 @@
 import { styled, Switch as MuiSwitch, SwitchProps } from "@mui/material";
 interface ToggleProps extends SwitchProps {
-  toggleSize: "medium" | "large";
+  toggleSize: "small" | "large";
 }
 
 const toggleStyles = {
-  medium: {
+  small: {
     root: {
       width: 28,
       height: 18,
@@ -65,7 +65,7 @@ const indeterminateStyles = {
       borderRadius: 2,
     },
   },
-  medium: {
+  small: {
     switchChecked: {
       top: 6,
       left: -4,
@@ -94,7 +94,7 @@ export const CommonToggle = styled(MuiSwitch, {
 
   return {
     ...toggleStyle.root,
-    display: "flex",
+
     padding: 0,
     overflow: "visible",
     backgroundColor: "transparent",