@lunit/design-system 1.0.0 → 2.0.1

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: {
@@ -114,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;
@@ -136,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;
@@ -151,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

@@ -59,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;
@@ -81,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;
@@ -96,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",
+  "version": "2.0.1",
   "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: "''",

package/src/components/Checkbox/Checkbox.tsx

@@ -6,7 +6,7 @@ import type { CheckboxProps } from "@mui/material";
 const CustomCheckbox = styled(MuiCheckbox)(({ theme }) => ({
   width: 20,
   height: 20,
-  padding: 1,
+  padding: 0,
   "&.Mui-disabled": {
     opacity: 0.38,
   },
@@ -27,30 +27,47 @@ const iconSize = {
 
 const DefaultIcon = styled("span")(({ theme }) => ({
   ...iconSize,
-  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 " +
-    "16.5 16.5 15.3807 16.5 14V4C16.5 2.61929 15.3807 1.5 14 1.5ZM4 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 0H4Z' /%3E%3C/svg%3E\")",
+  borderRadius: "20%",
+  boxShadow: `inset 0 0 0 1.5px ${theme.palette.lunit_token.component.selectcontrol_off}`,
 }));
 
-const CheckedIcon = styled("span")(({ theme }) => ({
-  ...iconSize,
-  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 " +
-    "7.14413C14.6074 6.72168 14.5533 6.09083 14.1309 5.73508C13.7084 5.37933 13.0776 5.43341 12.7218 5.85586L8.31824 11.0851L5.14993 8.37556C4.7302 8.01661 4.09895 8.06588 3.74 8.48561C3.38105 8.90533 3.43032 9.53658 3.85005 9.89553L7.78416 13.26C7.98672 13.4332 8.25006 13.5184 8.51571 13.4967C8.78135 13.4749 9.02732 13.348 9.19901 13.1441L14.2516 7.14413Z' /%3E%3C/svg%3E\")",
-}));
+const CheckedIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+    >
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M5 1C2.79086 1 1 2.79086 1 5V15C1 17.2091 2.79086 19 5 19H15C17.2091 19 19 17.2091 19 15V5C19 2.79086 17.2091 1 15 1H5ZM15.2516 8.14413C15.6074 7.72168 15.5533 7.09083 15.1309 6.73508C14.7084 6.37933 14.0776 6.43341 13.7218 6.85586L9.31824 12.0851L6.14993 9.37556C5.7302 9.01661 5.09895 9.06588 4.74 9.48561C4.38105 9.90533 4.43032 10.5366 4.85005 10.8955L8.78416 14.26C8.98672 14.4332 9.25006 14.5184 9.51571 14.4967C9.78135 14.4749 10.0273 14.348 10.199 14.1441L15.2516 8.14413Z"
+        fill="#00C9EA"
+      />
+    </svg>
+  );
+};
 
-const IndeterminateIcon = styled("span")(({ theme }) => ({
-  ...iconSize,
-  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 0H4ZM4 8C3.44772 8 3 8.44771 3 9C3 9.5523 3.44771 10 4 10H14C14.5523 10 15 9.5523 15 9C15 8.44772 14.5523 8 14 8H4Z' /%3E%3C/svg%3E\")",
-}));
+const IndeterminateIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+    >
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M5 1C2.79086 1 1 2.79086 1 5V15C1 17.2091 2.79086 19 5 19H15C17.2091 19 19 17.2091 19 15V5C19 2.79086 17.2091 1 15 1H5ZM5 9C4.44772 9 4 9.44771 4 10C4 10.5523 4.44771 11 5 11L15 11C15.5523 11 16 10.5523 16 10C16 9.44772 15.5523 9 15 9L5 9Z"
+        fill="#00C9EA"
+      />
+    </svg>
+  );
+};
 
 const Checkbox = (props: CheckboxProps) => {
   return (

package/src/components/Dialog/Dialog.styled.ts

@@ -0,0 +1,172 @@
+import { styled } from "@mui/material/styles";
+
+import type { DialogBase } from "./Dialog";
+import type { CSSObject } from "@mui/material/styles";
+
+export interface DialogElementStyle {
+  [key: string]: CSSObject;
+}
+
+export type DialogStyle = Pick<DialogBase, "size" | "type" | "nonModal">;
+
+const DIALOG_WRAPPER_STYLE: DialogElementStyle = {
+  small: {
+    width: "320px",
+    maxWidth: "320px",
+  },
+  medium: {
+    width: "500px",
+    maxWidth: "840px",
+  },
+  modal: {
+    position: "relative",
+  },
+  nonModal: {
+    position: "fixed",
+    top: "30px",
+    right: "30px",
+  },
+};
+
+const DIALOG_TITLE_STYLE: DialogElementStyle = {
+  small: {
+    display: "flex",
+    alignItems: "center",
+    height: "52px",
+    maxHeight: "100%",
+    padding: "20px 20px 4px 20px", // Title's X button pluses 2px to paddingTop and Bottom
+  },
+  medium: {
+    display: "flex",
+    alignItems: "center",
+    height: "64px",
+    maxHeight: "100%",
+    padding: "30px 32px 6px 32px", // Title's X button pluses 2px to paddingTop and Bottom
+  },
+};
+
+const DIALOG_CONTENT_STYLE: DialogElementStyle = {
+  small: {
+    paddingInline: "20px calc(20px - 10px)",
+    paddingTop: "8px",
+    paddingBottom: "28px",
+  },
+  smallAction: {
+    paddingInline: "20px calc(20px - 10px)",
+    paddingBlock: "8px",
+  },
+  medium: {
+    paddingInline: "32px calc(32px - 14px)",
+    paddingTop: "16px",
+    paddingBottom: "32px",
+  },
+  mediumAction: {
+    paddingInline: "32px calc(32px - 14px)",
+    paddingBlock: "16px",
+  },
+};
+
+const DIALOG_ACTION_STYLE: DialogElementStyle = {
+  small: {
+    height: "64px",
+    padding: "8px 20px 20px 20px",
+  },
+  medium: {
+    height: "84px",
+    padding: "16px 32px 32px 32px",
+  },
+};
+
+export const StyledBackdrop = styled("div")({
+  position: "fixed",
+  top: 0,
+  left: 0,
+  width: "100%",
+  height: "100%",
+  backgroundColor: "rgba(17, 17, 19, 0.7)",
+  zIndex: 1000,
+  display: "grid",
+  placeItems: "center",
+});
+
+export const StyledDialog = styled("div")<DialogStyle>(
+  ({ theme, size, nonModal, type }) => ({
+    zIndex: 1001,
+    maxHeight: "80vh",
+    display: "flex",
+    flexDirection: "column",
+    boxSizing: "border-box",
+    borderRadius: "10px",
+    backgroundColor: theme.palette.lunit_token.core.bg_03,
+    color: theme.palette.lunit_token.core.text_normal,
+
+    ...DIALOG_WRAPPER_STYLE[size === "small" ? "small" : "medium"],
+    ...DIALOG_WRAPPER_STYLE[nonModal ? "nonModal" : "modal"],
+
+    "& #dialog-title": {
+      ...DIALOG_TITLE_STYLE[size === "small" ? "small" : "medium"],
+    },
+
+    "& #dialog-content": {
+      ...DIALOG_CONTENT_STYLE[
+        size === "small" && type !== "passive"
+          ? "smallAction"
+          : size === "small"
+          ? "small"
+          : size === "medium" && type !== "passive"
+          ? "mediumAction"
+          : "medium"
+      ],
+
+      scrollbarGutter: "stable",
+      "::-webkit-scrollbar": {
+        width: size === "small" ? "10px" : "14px",
+      },
+      "::webkit-scrollbar-track": {
+        background: "transparent",
+      },
+      "::-webkit-scrollbar-thumb": {
+        backgroundClip: "padding-box",
+        border: `2px solid transparent`,
+        /**
+         * Figma's border-radius is 6px, but actual border radius is 10px since padding 2px is added.
+         */
+        borderRadius: "10px",
+        backgroundColor: theme.palette.lunit_token.component.scrollbars_bg,
+      },
+    },
+
+    "& #dialog-action": {
+      ...DIALOG_ACTION_STYLE[size === "small" ? "small" : "medium"],
+    },
+  })
+);
+
+export const StyledDialogTitle = styled("header")({
+  display: "flex",
+  width: "100%",
+  flex: "0 0 auto",
+  alignItems: "center",
+  justifyContent: "flex-start",
+  gap: "8px",
+});
+
+export const StyledDialogTitleIconWrapper = styled("div")({
+  display: "flex",
+  justifyContent: "center",
+  width: "20px",
+  height: "20px",
+  "& .MuiSvgIcon-root": {
+    display: "flex",
+    justifyContent: "center",
+    width: "20px",
+    height: "20px",
+    fontSize: "20px",
+  },
+});
+
+export const StyledDialogContent = styled("div")(({ theme }) => ({
+  ...theme.typography.body2_14_regular,
+  flex: "1 1 auto",
+  overflowY: "scroll",
+}));