@lunit/design-system 2.0.2 → 2.1.0

package/src/foundation/colors/base/magenta.ts

@@ -2,7 +2,8 @@ import { grey } from "./grey";
 
 export const magenta = {
   5: "#FFF0F7",
-  10: "#FFD6E8",
+  10: "#FFE3F0",
+  15: "#FDCDE3",
   20: "#FAB2D3",
   30: "#F681B7",
   40: "#FF50A0",
@@ -16,6 +17,7 @@ export const magenta = {
 export const magentaText = {
   5: grey[95],
   10: grey[95],
+  15: grey[95],
   20: grey[95],
   30: grey[95],
   40: grey[95],

package/src/foundation/colors/base/orange.ts

@@ -2,20 +2,22 @@ import { grey } from "./grey";
 
 export const orange = {
   5: "#FFF2E8",
-  10: "#FFD9BE",
-  20: "#FFB784",
-  30: "#FF9B54",
-  40: "#F58636",
-  50: "#D36210",
-  60: "#AB4800",
-  70: "#6F3209",
-  80: "#3E1A00",
-  90: "#231000",
+  10: "#FFE4CD",
+  15: "#FFCEA6",
+  20: "#FFB375",
+  30: "#FF9945",
+  40: "#FF811A",
+  50: "#D35F00",
+  60: "#AB4D00",
+  70: "#733400",
+  80: "#472000",
+  90: "#2B1400",
 };
 
 export const orangeText = {
   5: grey[95],
   10: grey[95],
+  15: grey[95],
   20: grey[95],
   30: grey[95],
   40: grey[95],

package/src/foundation/colors/base/purple.ts

@@ -2,7 +2,8 @@ import { grey } from "./grey";
 
 export const purple = {
   5: "#F6F2FF",
-  10: "#E6D7FF",
+  10: "#ECE1FF",
+  15: "#E1CEFF",
   20: "#D4BBFF",
   30: "#BE95FF",
   40: "#9E6BF0",
@@ -16,6 +17,7 @@ export const purple = {
 export const purpleText = {
   5: grey[95],
   10: grey[95],
+  15: grey[95],
   20: grey[95],
   30: grey[95],
   40: grey[95],

package/src/foundation/colors/base/red.ts

@@ -2,20 +2,22 @@ import { grey } from "./grey";
 
 export const red = {
   5: "#FFF1F1",
-  10: "#FFD7D9",
-  20: "#FFB3B8",
+  10: "#FFE3E4",
+  15: "#FFC9CC",
+  20: "#FFA1A7",
   30: "#FF7077",
   40: "#FA464F",
   50: "#DA1E28",
   60: "#A2191F",
   70: "#750E13",
   80: "#520408",
-  90: "#3E0600",
+  90: "#2E0905",
 };
 
 export const redText = {
   5: grey[95],
   10: grey[95],
+  15: grey[95],
   20: grey[95],
   30: grey[95],
   40: grey[95],

package/src/foundation/colors/base/yellow.ts

@@ -1,21 +1,23 @@
 import { grey } from "./grey";
 
 export const yellow = {
-  5: "#FCF4D6",
-  10: "#FFF9C7",
-  20: "#FFF296",
-  30: "#FFEA5D",
-  40: "#FFDE03",
-  50: "#E1B000",
-  60: "#A67B0E",
-  70: "#6E5002",
-  80: "#584106",
-  90: "#3B2B00",
+  5: "#FFFEE9",
+  10: "#FFFDC6",
+  15: "#FFFC9C",
+  20: "#FFF870",
+  30: "#FEF71C",
+  40: "#FFE81B",
+  50: "#EACC37",
+  60: "#BBA11F",
+  70: "#736A03",
+  80: "#4C4800",
+  90: "#3C3900",
 };
 
 export const yellowText = {
   5: grey[95],
   10: grey[95],
+  15: grey[95],
   20: grey[95],
   30: grey[95],
   40: grey[95],

package/src/foundation/colors/index.ts

@@ -193,8 +193,11 @@ const paletteOptions = {
       icon_warning_02: "var(--icon_warning_02)",
       icon_info_02: "var(--icon_info_02)",
       hover: "var(--hover)",
+      status_hover: "var(--status_hover)",
       focused: "var(--focused)",
+      status_focused: "var(--status_focused)",
       selected: "var(--selected)",
+      status_selected: "var(--status_selected)",
       shadow_01: "var(--shadow_01)",
       shadow_02: "var(--shadow_02)",
       shadow_03: "var(--shadow_03)",

package/src/foundation/colors/token/component.ts

@@ -33,10 +33,11 @@ export const tokenComponentColor: TokenComponentColorValue = {
       dark2: "--lunit_teal_40",
     },
     btn_secondary_border: {
+      // Deprecated. Please use core.border_medium instead.
       light1: "--grey_15",
       light2: "--grey_15",
-      dark1: "--grey_5",
-      dark2: "--grey_5",
+      dark1: "--grey_60",
+      dark2: "--grey_60",
     },
     btn_primary_text_1: {
       light1: "--lunit_teal_50",
@@ -75,6 +76,7 @@ export const tokenComponentColor: TokenComponentColorValue = {
       dark2: "--lunit_teal_80",
     },
     btn_selected_secondary_bg: {
+      // Deprecated. Please use btn_secondary_bg instead.
       light1: "--lunit_teal_10",
       light2: "--lunit_teal_10",
       dark1: "--grey_80",
@@ -149,12 +151,14 @@ export const tokenComponentColor: TokenComponentColorValue = {
   },
   dataTable: {
     datatable_border_01: {
+      // Deprecated. Please use core.border_medium instead.
       light1: "--grey_20",
       light2: "--grey_30",
       dark1: "--grey_50",
       dark2: "--grey_40",
     },
     datatable_border_02: {
+      // Deprecated. Please use core.border_light instead.
       light1: "--grey_10",
       light2: "--grey_15",
       dark1: "--grey_80",
@@ -189,10 +193,10 @@ export const tokenComponentColor: TokenComponentColorValue = {
   },
   modal: {
     modal_overlay: {
-      light1: "rgba(17, 17, 19, 0.7)", // "--grey_95 70%",
-      light2: "rgba(17, 17, 19, 0.7)", // "--grey_95 70%",
-      dark1: "rgba(17, 17, 19, 0.7)", // "--grey_95 70%",
-      dark2: "rgba(17, 17, 19, 0.7)", // "--grey_95 70%",
+      light1: "rgba(15, 15, 18, 0.7)", // "--grey_95 70%", = #0F0F12 70%
+      light2: "rgba(15, 15, 18, 0.7)", // "--grey_95 70%",
+      dark1: "rgba(15, 15, 18, 0.7)", // "--grey_95 70%",
+      dark2: "rgba(15, 15, 18, 0.7)", // "--grey_95 70%",
     },
   },
   tooltip: {
@@ -217,10 +221,10 @@ export const tokenComponentColor: TokenComponentColorValue = {
   },
   alert: {
     alert_error_bg: {
-      light1: "rgba(250, 77, 86, 0.16)", // "--red_40 16%",
-      light2: "rgba(250, 77, 86, 0.16)", // "--red_40 16%",
-      dark1: "rgba(255, 131, 137, 0.32)", // "--red_30 32%",
-      dark2: "rgba(255, 131, 137, 0.32)", // "--red_30 32%",
+      light1: "rgba(250, 70, 79, 0.16)", // "--red_40 16%",
+      light2: "rgba(250, 70, 79, 0.16)", // "--red_40 16%",
+      dark1: "rgba(255, 112, 119, 0.32)", // "--red_30 32%",
+      dark2: "rgba(255, 112, 119, 0.32)", // "--red_30 32%",
     },
     alert_error_border: {
       light1: "--red_40",
@@ -229,10 +233,10 @@ export const tokenComponentColor: TokenComponentColorValue = {
       dark2: "--red_30",
     },
     alert_success_bg: {
-      light1: "rgba(36, 161, 72, 0.16)", // "--green_40 16%",
-      light2: "rgba(36, 161, 72, 0.16)", // "--green_40 16%",
-      dark1: "rgba(66, 190, 101, 0.32)", // "--green_30 32%",
-      dark2: "rgba(66, 190, 101, 0.32)", // "--green_30 32%",
+      light1: "rgba(26, 159, 63, 0.16)", // "--green_40 16%",
+      light2: "rgba(26, 159, 63, 0.16)", // "--green_40 16%",
+      dark1: "rgba(68, 190, 103, 0.32)", // "--green_30 32%",
+      dark2: "rgba(68, 190, 103, 0.32)", // "--green_30 32%",
     },
     alert_success_border: {
       light1: "--green_30",
@@ -241,10 +245,10 @@ export const tokenComponentColor: TokenComponentColorValue = {
       dark2: "--green_30",
     },
     alert_info_bg: {
-      light1: "rgba(69, 137, 255, 0.16)", // "--blue_40 16%",
-      light2: "rgba(69, 137, 255, 0.16)", // "--blue_40 16%",
-      dark1: "rgba(120, 169, 255, 0.32)", // "--blue_30 32%",
-      dark2: "rgba(120, 169, 255, 0.32)", // "--blue_30 32%",
+      light1: "rgba(61, 136, 250, 0.16)", // "--blue_40 16%",
+      light2: "rgba(61, 136, 250, 0.16)", // "--blue_40 16%",
+      dark1: "rgba(113, 169, 250, 0.32)", // "--blue_30 32%",
+      dark2: "rgba(113, 169, 250, 0.32)", // "--blue_30 32%",
     },
     alert_info_border: {
       light1: "--blue_40",
@@ -253,10 +257,10 @@ export const tokenComponentColor: TokenComponentColorValue = {
       dark2: "--blue_30",
     },
     alert_warning_bg: {
-      light1: "rgba(245, 134, 54, 0.16)", // "--orange_40 16%",
-      light2: "rgba(245, 134, 54, 0.16)", // "--orange_40 16%",
-      dark1: "rgba(255, 155, 84, 0.32)", // "--orange_30 32%",
-      dark2: "rgba(255, 155, 84, 0.32)", // "--orange_30 32%",
+      light1: "rgba(255, 129, 26, 0.16)", // "--orange_40 16%",
+      light2: "rgba(255, 129, 26, 0.16)", // "--orange_40 16%",
+      dark1: "rgba(255, 153, 69, 0.32)", // "--orange_30 32%",
+      dark2: "rgba(255, 153, 69, 0.32)", // "--orange_30 32%",
     },
     alert_warning_border: {
       light1: "--orange_40",

package/src/foundation/colors/token/core.ts

@@ -120,6 +120,13 @@ export const tokenCoreColor: TokenCoreColorValue = {
     dark2: "--blue_30",
   },
   hover: {
+    // Deprecated. Please use core.status_hover instead.
+    light1: "rgba(0, 0, 0, 0.12)", // "--grey_100 12%",
+    light2: "rgba(0, 0, 0, 0.12)", // "--grey_100 12%",
+    dark1: "rgba(255, 255, 255, 0.12)", // "--grey_0 12%",
+    dark2: "rgba(255, 255, 255, 0.12)", // "--grey_0 12%",
+  },
+  status_hover: {
     // TODO: 알파값 적용 코드는 일단 하드코딩. 나중에 수정할것
     light1: "rgba(0, 0, 0, 0.12)", // "--grey_100 12%",
     light2: "rgba(0, 0, 0, 0.12)", // "--grey_100 12%",
@@ -127,12 +134,26 @@ export const tokenCoreColor: TokenCoreColorValue = {
     dark2: "rgba(255, 255, 255, 0.12)", // "--grey_0 12%",
   },
   focused: {
+    // Deprecated. Please use core.status_focused instead.
+    light1: "--lunit_teal_40",
+    light2: "--lunit_teal_40",
+    dark1: "--lunit_teal_40",
+    dark2: "--lunit_teal_40",
+  },
+  status_focused: {
     light1: "--lunit_teal_40",
     light2: "--lunit_teal_40",
     dark1: "--lunit_teal_40",
     dark2: "--lunit_teal_40",
   },
   selected: {
+    // Deprecated. Please use core.status_selected instead.
+    light1: "--lunit_teal_10",
+    light2: "--lunit_teal_10",
+    dark1: "--lunit_teal_80",
+    dark2: "--lunit_teal_80",
+  },
+  status_selected: {
     light1: "--lunit_teal_10",
     light2: "--lunit_teal_10",
     dark1: "--lunit_teal_80",

package/src/foundation/colors/types.ts

@@ -20,8 +20,11 @@ export interface ColorToken {
     icon_warning_02: string;
     icon_info_02: string;
     hover: string;
+    status_hover: string;
     focused: string;
+    status_focused: string;
     selected: string;
+    status_selected: string;
     shadow_01: string;
     shadow_02: string;
     shadow_03: string;

package/src/index.ts

@@ -8,7 +8,12 @@ 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 Dropdown,
+  DropdownItem,
+  DropdownDivider,
+  DropdownSubtitle,
+} from "./components/Dropdown";
 export { default as FormLabel } from "./components/FormLabel";
 export { default as Radio } from "./components/Radio";
 export { default as RadioGroup } from "./components/RadioGroup";

package/src/stories/components/Chip/Chip.stories.tsx

@@ -281,3 +281,21 @@ export const ContainedWithDeleteAndThumbnail = {
 
   name: "Kind(Variant): Contained with Thumbnail and Deletable",
 };
+
+export const Multiline = {
+  render: () => (
+    <Box sx={{ width: 100 }}>
+      <Chip
+        sx={{
+          height: "auto",
+          "& .MuiChip-label": {
+            display: "block",
+            whiteSpace: "normal",
+          },
+        }}
+        label="This is a chip that has multiple lines."
+      />
+      <Chip label="This is a chip that has ellipsis." />
+    </Box>
+  ),
+};

package/src/stories/components/Chip/ChipDocs.mdx

@@ -120,6 +120,26 @@ The hover/pressed effects are only applied to the delete icon. <br />
 <Chip label="label@lunit.io" onDelete={() => console.log("onDelete")} thumbnail="W as initial" />
 ````
 
+### Multiline
+By default, Chips displays labels only in a single line. To have them support multiline content, use the `sx` prop to add `height:auto` to the Chip component, and `whiteSpace: normal` to the `label` styles.
+
+<Canvas of={ChipStories.Multiline} />
+```tsx
+<Chip
+  sx={{
+    height: "auto",
+    "& .MuiChip-label": {
+      display: "block",
+      whiteSpace: "normal",
+    },
+  }}
+  label="This is a chip that has multiple lines."
+/>
+<Chip label="This is a chip that has ellipsis." />
+````
+
+
+
 ## Reference
 
 - [Material-UI Chip](https://mui.com/material-ui/react-chip/)

package/src/stories/components/Dialog/DialogDocs.mdx

@@ -41,24 +41,16 @@ If it is set to `false`, the Dialog will not be rendered in the DOM.
 </Dialog>
 ```
 
-### Dismiss(onClose, enableBackButtonClose, enableBackdropClick)
+### Dismiss(onClose, enableBackdropClick)
 
 The `onClose` prop is used to close the Dialog. You can pass a function to the prop to close the Dialog. <br />
-If the `enableBackButtonClick` prop is set to `true`, the Dialog will be closed when the back button(escape/backspace key) is pressed. <br />
 If the `enableBackdropClose` prop is set to `true`, the Dialog will be closed when the backdrop(outside of the dialog area) is clicked. <br />
-
-<br />
-The `enableBackButtonClick` is awalys `true` in Passive Modal, but it is optional
-in Action Modal. <br />
-The `enableBackdropClose` is awalys `true` only in Passive Modal.
+The `enableBackdropClose` is always `true` only in Passive Modal.
 
 ```tsx
 <Dialog isOpen={true} onClose={close} type="passive" title="Title area">
   Lorem Ipsum is simply dummy text of the a printing and typesetting industry
 </Dialog>
-<Dialog isOpen={true} onClose={close} type="action" title="Title area" actions={actionsChildren} enableBackButtonClick>
-  Lorem Ipsum is simply dummy text of the a printing and typesetting industry
-</Dialog>
 ```
 
 ### Type