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

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

@@ -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";
 }
 

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/ToggleButton/ToggleButton.styled.ts

@@ -57,10 +57,9 @@ export const IconWrapper = styled("div")<{
 }>(({ hasIconOnly, size }) => ({
   width: "20px",
   height: "20px",
-  padding: "1px",
   marginRight: hasIconOnly ? "0px" : size === "large" ? "8px" : "4px",
 
   "*:nth-of-type(1)": {
-    fontSize: "18px",
+    fontSize: "20px",
   },
 }));

package/src/foundation/Typography/index.ts

@@ -86,6 +86,24 @@ export const createTypographyCssBaseline = () => {
     ":root": {
       ...cssVariables,
     },
+    ".light1": {
+      color: "var(--text_normal)",
+    },
+    ".light2": {
+      color: "var(--text_normal)",
+    },
+    ".dark1": {
+      color: "var(--text_normal)",
+    },
+    ".dark2": {
+      color: "var(--text_normal)",
+    },
+    ".dark3": {
+      color: "var(--text_normal)",
+    },
+    ".dark4": {
+      color: "var(--text_normal)",
+    },
   };
 };
 

package/src/foundation/Typography/tokens.ts

@@ -69,73 +69,61 @@ const fontVariants: Record<string, TypographyStyleOptions> = {
     fontWeight: "var(--headline1-font-weight)",
     fontSize: "var(--headline1-font-size)",
     lineHeight: "var(--headline1-line-height)",
-    color: "var(--text_normal)",
   },
   headline2: {
     fontWeight: "var(--headline2-font-weight)",
     fontSize: "var(--headline2-font-size)",
     lineHeight: "var(--headline2-line-height)",
-    color: "var(--text_normal)",
   },
   headline3: {
     fontWeight: "var(--headline3-font-weight)",
     fontSize: "var(--headline3-font-size)",
     lineHeight: "var(--headline3-line-height)",
-    color: "var(--text_normal)",
   },
   headline4: {
     fontWeight: "var(--headline4-font-weight)",
     fontSize: "var(--headline4-font-size)",
     lineHeight: "var(--headline4-line-height)",
-    color: "var(--text_normal)",
   },
   headline5: {
     fontWeight: "var(--headline5-font-weight)",
     fontSize: "var(--headline5-font-size)",
     lineHeight: "var(--headline5-line-height)",
-    color: "var(--text_normal)",
   },
   body1_16_semibold: {
     fontWeight: "var(--body1-16-semibold-font-weight)",
     fontSize: "var(--body1-16-semibold-font-size)",
     lineHeight: "var(--body1-16-semibold-line-height)",
-    color: "var(--text_normal)",
   },
   body1_16_regular: {
     fontWeight: "var(--body1-16-regular-font-weight)",
     fontSize: "var(--body1-16-regular-font-size)",
     lineHeight: "var(--body1-16-regular-line-height)",
-    color: "var(--text_normal)",
   },
   body2_14_bold: {
     fontWeight: "var(--body2-14-bold-font-weight)",
     fontSize: "var(--body2-14-bold-font-size)",
     lineHeight: "var(--body2-14-bold-line-height)",
-    color: "var(--text_normal)",
   },
   body2_14_medium: {
     fontWeight: "var(--body2-14-medium-font-weight)",
     fontSize: "var(--body2-14-medium-font-size)",
     lineHeight: "var(--body2-14-medium-line-height)",
-    color: "var(--text_normal)",
   },
   body2_14_regular: {
     fontWeight: "var(--body2-14-regular-font-weight)",
     fontSize: "var(--body2-14-regular-font-size)",
     lineHeight: "var(--body2-14-regular-line-height)",
-    color: "var(--text_normal)",
   },
   body3_12_semibold: {
     fontWeight: "var(--body3-12-semibold-font-weight)",
     fontSize: "var(--body3-12-semibold-font-size)",
     lineHeight: "var(--body3-12-semibold-line-height)",
-    color: "var(--text_normal)",
   },
   body3_12_regular: {
     fontWeight: "var(--body3-12-regular-font-weight)",
     fontSize: "var(--body3-12-regular-font-size)",
     lineHeight: "var(--body3-12-regular-line-height)",
-    color: "var(--text_normal)",
   },
   overline: {
     fontWeight: "var(--overline-font-weight)",
@@ -143,14 +131,12 @@ const fontVariants: Record<string, TypographyStyleOptions> = {
     lineHeight: "var(--overline-line-height)",
     letterSpacing: "1px",
     textTransform: "uppercase",
-    color: "var(--text_normal)",
   },
   button1: {
     fontWeight: "var(--button1-font-weight)",
     fontSize: "var(--button1-font-size)",
     lineHeight: "var(--button1-line-height)",
     textTransform: "capitalize",
-    color: "var(--text_normal)",
   },
   button2: {
     fontWeight: "var(--button2-font-weight)",
@@ -158,13 +144,11 @@ const fontVariants: Record<string, TypographyStyleOptions> = {
     lineHeight: "var(--button2-line-height)",
     letterSpacing: "0.2px",
     textTransform: "capitalize",
-    color: "var(--text_normal)",
   },
   caption: {
     fontWeight: "var(--caption-font-weight)",
     fontSize: "var(--caption-font-size)",
     lineHeight: "var(--caption-line-height)",
-    color: "var(--text_normal)",
   },
 };
 

package/src/foundation/colors/index.ts

@@ -172,6 +172,10 @@ const paletteOptions = {
     main: base.green[40], // core.text_success.dark1
   },
   grey: base.greyForMUI,
+  text: {
+    primary: base.grey[5], // core.text_normal.dark1
+    secondary: base.grey[40], // core.text_medium.dark1
+  },
   lunit_global: lunitColors,
   lunit_token: {
     core: {

package/src/foundation/index.ts

@@ -9,7 +9,7 @@ import { createElevationCssBaseline, elevationOptions } from "./Elevation";
 
 export const foundationCssBaseline: Components<Theme>["MuiCssBaseline"] = {
   styleOverrides: deepmerge(
-    deepmerge(createTypographyCssBaseline(), createColorCssBaseline()),
+    deepmerge(createColorCssBaseline(), createTypographyCssBaseline()),
     createElevationCssBaseline()
   ),
 };

package/src/stories/components/Button/BasicButton.stories.tsx

@@ -50,6 +50,16 @@ export default {
         defaultValue: { summary: "contained" },
       },
     },
+    variant: {
+      control: {
+        type: "radio",
+      },
+      options: ["contained", "outlined", "text", "ghost"],
+      description: "The variant is alias of kind.",
+      table: {
+        defaultValue: { summary: "contained" },
+      },
+    },
     color: {
       control: {
         type: "radio",
@@ -98,6 +108,7 @@ export default {
         "disabled",
         "size",
         "kind",
+        "variant",
         "color",
         "icon",
       ],

package/src/stories/components/Button/IconButton.stories.tsx

@@ -36,6 +36,16 @@ export default {
         defaultValue: { summary: "contained" },
       },
     },
+    variant: {
+      control: {
+        type: "radio",
+      },
+      options: ["contained", "outlined", "text", "ghost"],
+      description: "The variant is alias of kind.",
+      table: {
+        defaultValue: { summary: "contained" },
+      },
+    },
     color: {
       control: {
         type: "radio",
@@ -85,6 +95,7 @@ export default {
         "disabled",
         "size",
         "kind",
+        "variant",
         "color",
       ],
     },