@lunit/design-system 2.0.2 → 2.2.0

package/src/components/Dropdown/index.ts

@@ -1 +1,7 @@
 export { default } from "./Dropdown";
+export {
+  DropdownItem,
+  DropdownDivider,
+  DropdownSubtitle,
+} from "./DropdownItem";
+export type { DropdownProps, DropdownItemProps } from "./Dropdown.types";

package/src/components/TextField/TextField.style.ts

@@ -30,15 +30,15 @@ const getSinglelineTextFieldPaddingByIconAndSize = ({
     case "small":
       return `4px ${hasRightIcon ? "8px" : "12px"} 4px ${
         hasLeftIcon ? "8px" : "12px"
-      }}`;
+      }`;
     case "medium":
       return `8px ${hasRightIcon ? "12px" : "16px"} 8px ${
         hasLeftIcon ? "12px" : "16px"
-      }}`;
+      }`;
     case "large":
       return `10px ${hasRightIcon ? "12px" : "16px"} 10px ${
         hasLeftIcon ? "12px" : "16px"
-      }}`;
+      }`;
   }
 };
 
@@ -144,6 +144,31 @@ const commonStyle = ({ lunit_token }: { lunit_token: ColorToken }) => ({
       color: lunit_token.core.text_error,
     },
   },
+  "& .MuiInputBase-input": {
+    "&:-webkit-autofill, &:-webkit-autofill:active, &:-webkit-autofill:focus, &:-webkit-autofill:hover, &:-webkit-autofill:focus-visible, &:-webkit-autofill:focus-within, &:-webkit-autofill:target, &:-webkit-autofill:first-line":
+      {
+        border: "none",
+        borderRadius: "0px",
+        backgroundColor: "transparent",
+        color: lunit_token.core.text_normal,
+        /**
+         * the background color and text color are not changed color, background css tag.
+         * so we need to use -webkit-text-fill-color to change the text color.
+         * and we need to use -webkit-box-shadow, -webkit-transition to change the background color.
+         *
+         * reference: https://css-tricks.com/almanac/pseudo-selectors/a/autofill/
+         */
+        WebkitTextFillColor: lunit_token.core.text_normal,
+        WebkitBoxShadow: "0 0 0px 1000px transparent inset",
+        WebkitTransition: "background-color 5000s ease-in-out 0s",
+        /**
+         * textfield flash cursor color
+         *
+         * docs: https://developer.mozilla.org/en-US/docs/Web/CSS/caret-color
+         */
+        caretColor: lunit_token.core.text_normal,
+      },
+  },
 });
 
 const sizeStyle = ({

package/src/components/TextField/TextField.tsx

@@ -73,13 +73,7 @@ const TextField = forwardRef<HTMLDivElement, TextFieldProps>((props, ref) => {
   const { rows, size, multiline = false, variant, ...restProps } = props;
 
   return multiline ? (
-    <MultiTextField
-      {...restProps}
-      ref={ref}
-      maxRows={Infinity}
-      size={size}
-      rows={rows}
-    />
+    <MultiTextField {...restProps} ref={ref} size={size} rows={rows} />
   ) : (
     <SingleTextField {...restProps} ref={ref} size={size} />
   );

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

@@ -4,6 +4,8 @@ import type {
   OutlinedTextFieldProps,
 } from "@mui/material/TextField";
 
+import type { JSX } from "react";
+
 export type TextFieldSize = "small" | "medium" | "large";
 export interface BaseTextFieldProps
   extends Omit<

package/src/components/TextField/TextFieldIcon.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { type JSX } from "react";
 
 import { IconWrapper } from "./TextField.style";
 

package/src/foundation/Typography/index.ts

@@ -14,6 +14,11 @@ type DSVariants =
   | "body2_14_regular"
   | "body3_12_semibold"
   | "body3_12_regular"
+  | "body_m2"
+  | "body_reg6"
+  | "body_reg8"
+  | "small_body_sb1"
+  | "small_body_m2"
   | "button1"
   | "button2";
 
@@ -74,6 +79,11 @@ export const typographyDefaultProps = {
     body2_14_regular: "p",
     body3_12_semibold: "p",
     body3_12_regular: "p",
+    body_m2: "p",
+    body_reg6: "p",
+    body_reg8: "p",
+    small_body_sb1: "p",
+    small_body_m2: "p",
   },
 };
 

package/src/foundation/Typography/tokens.ts

@@ -47,6 +47,24 @@ const body = {
   "--body3-12-regular-font-weight": "var(--font-weight-regular)",
   "--body3-12-regular-font-size": "12.4px",
   "--body3-12-regular-line-height": "16px",
+  "--body_m2-font-weight": "var(--font-weight-medium)",
+  "--body_m2-font-size": "13px",
+  "--body_m2-line-height": "18px",
+  "--body_reg6-font-weight": "var(--font-weight-regular)",
+  "--body_reg6-font-size": "13px",
+  "--body_reg6-line-height": "18px",
+  "--body_reg8-font-weight": "var(--font-weight-regular)",
+  "--body_reg8-font-size": "12px",
+  "--body_reg8-line-height": "16px",
+} as const;
+
+const smallBody = {
+  "--small_body_sb1-font-weight": "var(--font-weight-semibold)",
+  "--small_body_sb1-font-size": "12px",
+  "--small_body_sb1-line-height": "16px",
+  "--small_body_m2-font-weight": "var(--font-weight-medium)",
+  "--small_body_m2-font-size": "12px",
+  "--small_body_m2-line-height": "20px",
 } as const;
 
 const etc = {
@@ -125,6 +143,32 @@ const fontVariants: Record<string, TypographyStyleOptions> = {
     fontSize: "var(--body3-12-regular-font-size)",
     lineHeight: "var(--body3-12-regular-line-height)",
   },
+  body_m2: {
+    fontWeight: "var(--body_m2-font-weight)",
+    fontSize: "var(--body_m2-font-size)",
+    lineHeight: "var(--body_m2-line-height)",
+    letterSpacing: "0.2px",
+  },
+  body_reg6: {
+    fontWeight: "var(--body_reg6-font-weight)",
+    fontSize: "var(--body_reg6-font-size)",
+    lineHeight: "var(--body_reg6-line-height)",
+  },
+  body_reg8: {
+    fontWeight: "var(--body_reg8-font-weight)",
+    fontSize: "var(--body_reg8-font-size)",
+    lineHeight: "var(--body_reg8-line-height)",
+  },
+  small_body_sb1: {
+    fontWeight: "var(--small_body_sb1-font-weight)",
+    fontSize: "var(--small_body_sb1-font-size)",
+    lineHeight: "var(--small_body_sb1-line-height)",
+  },
+  small_body_m2: {
+    fontWeight: "var(--small_body_m2-font-weight)",
+    fontSize: "var(--small_body_m2-font-size)",
+    lineHeight: "var(--small_body_m2-line-height)",
+  },
   overline: {
     fontWeight: "var(--overline-font-weight)",
     fontSize: "var(--overline-font-size)",
@@ -156,6 +200,7 @@ export const cssVariables = {
   ...fontWeights,
   ...headline,
   ...body,
+  ...smallBody,
   ...etc,
 };
 

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

@@ -1,21 +1,23 @@
 import { grey } from "./grey";
 
 export const blue = {
-  5: "#DAECFF",
-  10: "#D0E2FF",
-  20: "#9DCEFF",
-  30: "#78A9FF",
-  40: "#4589FF",
-  50: "#0F62FE",
-  60: "#0043CE",
-  70: "#0055AB",
-  80: "#001D6C",
-  90: "#002041",
+  5: "#EDF6FE",
+  10: "#D9E9FD",
+  15: "#BFD9FC",
+  20: "#A5C8FC",
+  30: "#71A9FA",
+  40: "#3D88FA",
+  50: "#0D68F2",
+  60: "#0E51BA",
+  70: "#0C3F8F",
+  80: "#032765",
+  90: "#03183F",
 };
 
 export const blueText = {
   5: grey[95],
   10: grey[95],
+  15: grey[95],
   20: grey[95],
   30: grey[95],
   40: grey[95],

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

@@ -1,21 +1,23 @@
 import { grey } from "./grey";
 
 export const green = {
-  5: "#EBFFF0",
-  10: "#B4EFC4",
+  5: "#E6FDEB",
+  10: "#C4F5D1",
+  15: "#A0E5B3",
   20: "#6FDC8C",
-  30: "#42BE65",
-  40: "#24A148",
-  50: "#198038",
-  60: "#0E6027",
-  70: "#044317",
-  80: "#022D0D",
-  90: "#071908",
+  30: "#44BE67",
+  40: "#1A9F3F",
+  50: "#138231",
+  60: "#0D6222",
+  70: "#0B4F1A",
+  80: "#01380F",
+  90: "#082209",
 };
 
 export const greenText = {
   5: grey[95],
   10: grey[95],
+  15: grey[95],
   20: grey[95],
   30: grey[95],
   40: grey[95],

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

@@ -1,20 +1,27 @@
 export const grey = {
   0: "#FFFFFF",
-  5: "#FAFAFB",
-  10: "#F1F1F4",
-  15: "#DFDFE2",
-  20: "#CFCFD1",
-  25: "#C0C0C2",
-  30: "#AFAFB1",
-  40: "#99999B",
-  50: "#747477",
-  60: "#626264",
-  70: "#4E4E50",
-  75: "#404042",
-  80: "#333336",
-  85: "#2D2D2F",
-  90: "#1F1F21",
-  95: "#111113",
+  5: "#F5F5F6",
+  10: "#EAEAEC",
+  15: "#DFDFE1",
+  20: "#D5D5D7",
+  25: "#C8C8CA",
+  30: "#BCBCBE",
+  35: "#B1B1B4",
+  40: "#A4A4A8",
+  45: "#9A9A9D",
+  50: "#8D8D90",
+  55: "#808084",
+  60: "#747479",
+  65: "#68686C",
+  70: "#59595D",
+  75: "#4A4A4E",
+  80: "#3B3B3F",
+  82: "#343438",
+  85: "#2E2E32",
+  88: "#27272B",
+  90: "#1F1F23",
+  93: "#16161A",
+  95: "#0F0F12",
   100: "#000000",
 };
 
@@ -26,13 +33,21 @@ export const greyText = {
   20: grey[95],
   25: grey[95],
   30: grey[95],
+  35: grey[95],
   40: grey[95],
+  45: grey[95],
   50: grey[5],
+  55: grey[5],
   60: grey[5],
+  65: grey[5],
   70: grey[5],
+  75: grey[5],
   80: grey[5],
+  82: grey[5],
   85: grey[5],
+  88: grey[5],
   90: grey[5],
+  93: grey[5],
   95: grey[5],
   100: grey[5],
 };

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

@@ -3,6 +3,7 @@ import { grey } from "./grey";
 export const lunit_teal = {
   5: "#EAFAFF",
   10: "#D1F7FF",
+  15: "#BDF4FF",
   20: "#96EDFF",
   30: "#30DFFC",
   40: "#00C9EA",
@@ -16,6 +17,7 @@ export const lunit_teal = {
 export const lunit_tealText = {
   5: lunit_teal[90],
   10: lunit_teal[90],
+  15: lunit_teal[90],
   20: grey[95],
   30: grey[95],
   40: grey[95],

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