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

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

@@ -38,7 +38,7 @@ export const CustomToggleButton = styled(MuiToggleButton, {
       ...(selectedColor === "secondary" && {
         "&.Mui-selected, &.Mui-selected:hover": {
           border: "none",
-          backgroundColor: lunit_token.component.btn_selected_secondary_bg,
+          backgroundColor: lunit_token.component.btn_secondary_bg,
           color: lunit_token.component.btn_selected_secondary_text,
         },
       }),
@@ -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/Elevation/index.ts

@@ -24,7 +24,7 @@ export const elevationOptions = {
 export const createElevationCssBaseline = () => {
   return {
     // :root에 모든 theme이 정의되어 있지 않으므로 surface*에서 찾아야 함
-    ".light1, .light2, .dark1, .dark2, .dark3, .dark4": {
+    ".light1, .light2, .dark1, .dark2": {
       ...createCSSVars(shadows),
       ...createCSSVars(elevations),
       // `--elevation-shadow`가 정의되지 않아도 `box-shadow: var(--elevation-shadow)` 구문을 해석하려면 필요함

package/src/foundation/Typography/index.ts

@@ -86,6 +86,18 @@ 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)",
+    },
   };
 };
 

package/src/foundation/Typography/tokens.ts

@@ -16,7 +16,7 @@ const headline = {
   "--headline2-line-height": "65px",
   "--headline3-font-weight": "var(--font-weight-semibold)",
   "--headline3-font-size": "24px",
-  "--headline3-line-height": "57px",
+  "--headline3-line-height": "29px",
   "--headline4-font-weight": "var(--font-weight-semibold)",
   "--headline4-font-size": "20px",
   "--headline4-line-height": "28px",
@@ -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/base/grey.ts

@@ -3,7 +3,8 @@ export const grey = {
   5: "#FAFAFB",
   10: "#F1F1F4",
   15: "#DFDFE2",
-  20: "#C6C6C8",
+  20: "#CFCFD1",
+  25: "#C0C0C2",
   30: "#AFAFB1",
   40: "#99999B",
   50: "#747477",
@@ -23,6 +24,7 @@ export const greyText = {
   10: grey[95],
   15: grey[95],
   20: grey[95],
+  25: grey[95],
   30: grey[95],
   40: grey[95],
   50: grey[5],

package/src/foundation/colors/index.ts

@@ -115,12 +115,6 @@ export const createColorCssBaseline = () => {
     ".dark2": {
       ...createTokenColorVariables("dark2"),
     },
-    ".dark3": {
-      ...createTokenColorVariables("dark3"),
-    },
-    ".dark4": {
-      ...createTokenColorVariables("dark4"),
-    },
   };
 };
 
@@ -172,12 +166,17 @@ 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: {
       bg_01: "var(--bg_01)",
       bg_02: "var(--bg_02)",
       bg_03: "var(--bg_03)",
+      layer_01: "var(--layer_01)",
       text_primary: "var(--text_primary)",
       text_normal: "var(--text_normal)",
       text_medium: "var(--text_medium)",
@@ -200,6 +199,8 @@ const paletteOptions = {
       shadow_02: "var(--shadow_02)",
       shadow_03: "var(--shadow_03)",
       shadow_04: "var(--shadow_04)",
+      border_light: "var(--border_light)",
+      border_medium: "var(--border_medium)",
     },
     component: {
       btn_primary_bg: "var(--btn_primary_bg)",
@@ -215,6 +216,8 @@ const paletteOptions = {
       btn_selected_primary_text: "var(--btn_selected_primary_text)",
       btn_selected_secondary_bg: "var(--btn_selected_secondary_bg)",
       btn_selected_secondary_text: "var(--btn_selected_secondary_text)",
+      btn_selected_tertiary_bg: "var(--btn_selected_tertiary_bg)",
+      btn_selected_tertiary_text: "var(--btn_selected_tertiary_text)",
       selectcontrol_on: "var(--selectcontrol_on)",
       selectcontrol_off: "var(--selectcontrol_off)",
       selectcontrol_handler: "var(--selectcontrol_handler)",