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

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

@@ -70,7 +70,10 @@ const getTextFieldPaddingBySize = ({
       });
 };
 
-const commonStyle = ({ token }: { token: ColorToken }) => ({
+const commonStyle = ({ lunit_token }: { lunit_token: ColorToken }) => ({
+  "&.MuiTextField-root": {
+    width: "100%",
+  },
   "& .MuiOutlinedInput-root": {
     borderRadius: "8px",
     width: "100%",
@@ -79,24 +82,24 @@ const commonStyle = ({ token }: { token: ColorToken }) => ({
       border: "none",
     },
     "&.Mui-error fieldset": {
-      border: `1px solid ${token.component.textfield_border_error}`,
+      border: `1px solid ${lunit_token.component.textfield_border_error}`,
     },
     "&.Mui-focused fieldset": {
-      border: `1px solid ${token.core.focused}`,
+      border: `1px solid ${lunit_token.core.focused}`,
     },
     "&.Mui-disabled": {
       opacity: 0.38,
       "&:hover::before": {
-        backgroundColor: token.component.textfield_bg,
+        backgroundColor: lunit_token.component.textfield_bg,
       },
     },
     "& input, textarea": {
       padding: 0,
       textOverflow: "ellipsis",
       "&::placeholder": {
-        color: token.core.text_medium,
+        color: lunit_token.core.text_medium,
         opacity: 1,
-        WebkitTextFillColor: token.core.text_medium,
+        WebkitTextFillColor: lunit_token.core.text_medium,
       },
     },
     "& textarea": {
@@ -107,16 +110,16 @@ const commonStyle = ({ token }: { token: ColorToken }) => ({
       },
       "&::-webkit-scrollbar-thumb": {
         borderRadius: "6px",
-        backgroundColor: token.component.scrollbars_bg,
+        backgroundColor: lunit_token.component.scrollbars_bg,
       },
     },
-    background: token.component.textfield_bg,
+    background: lunit_token.component.textfield_bg,
     overflow: "hidden",
-    color: token.core.text_normal,
+    color: lunit_token.core.text_normal,
     "&:hover": {
       position: "relative",
       zIndex: 0,
-      backgroundColor: token.component.textfield_bg,
+      backgroundColor: lunit_token.component.textfield_bg,
     },
     "&:hover::before": {
       content: '""',
@@ -126,11 +129,11 @@ const commonStyle = ({ token }: { token: ColorToken }) => ({
       width: "100%",
       height: "100%",
       zIndex: -1,
-      backgroundColor: token.core.hover,
+      backgroundColor: lunit_token.core.hover,
     },
     "&.Mui-focused": {
       "&:hover::before": {
-        backgroundColor: token.component.textfield_bg,
+        backgroundColor: lunit_token.component.textfield_bg,
       },
     },
   },
@@ -139,13 +142,13 @@ const commonStyle = ({ token }: { token: ColorToken }) => ({
       opacity: 0.38,
     },
     "&.Mui-error": {
-      color: token.core.text_error,
+      color: lunit_token.core.text_error,
     },
   },
 });
 
 const sizeStyle = ({
-  token,
+  lunit_token,
   textFieldSize,
   hasLeftIcon,
   hasRightIcon,
@@ -154,7 +157,7 @@ const sizeStyle = ({
 }: Pick<
   BaseTextFieldProps,
   "textFieldSize" | "hasLeftIcon" | "hasRightIcon" | "multiline"
-> & { token: ColorToken; typography: Typography }) => ({
+> & { lunit_token: ColorToken; typography: Typography }) => ({
   ...(textFieldSize === "small" && {
     "& .MuiInputBase-root": {
       padding: getTextFieldPaddingBySize({
@@ -176,17 +179,17 @@ const sizeStyle = ({
     },
     "& .MuiFormHelperText-root": {
       ...typography.body2_14_regular,
-      color: token.core.text_medium,
+      color: lunit_token.core.text_medium,
       margin: 0,
       marginTop: "4px",
       paddingLeft: "4px",
 
       "&.Mui-disabled": {
-        color: token.core.text_medium,
+        color: lunit_token.core.text_medium,
         opacity: 0.38,
       },
       "&.Mui-error": {
-        color: token.core.text_error,
+        color: lunit_token.core.text_error,
       },
     },
   }),
@@ -211,17 +214,17 @@ const sizeStyle = ({
     },
     "& .MuiFormHelperText-root": {
       ...typography.body2_14_regular,
-      color: token.core.text_medium,
+      color: lunit_token.core.text_medium,
       margin: 0,
       marginTop: "4px",
       paddingLeft: "4px",
 
       "&.Mui-disabled": {
-        color: token.core.text_medium,
+        color: lunit_token.core.text_medium,
         opacity: 0.38,
       },
       "&.Mui-error": {
-        color: token.core.text_error,
+        color: lunit_token.core.text_error,
       },
     },
   }),
@@ -246,17 +249,17 @@ const sizeStyle = ({
     },
     "& .MuiFormHelperText-root": {
       ...typography.body1_16_regular,
-      color: token.core.text_medium,
+      color: lunit_token.core.text_medium,
       margin: 0,
       marginTop: "4px",
       paddingLeft: "4px",
 
       "&.Mui-disabled": {
-        color: token.core.text_medium,
+        color: lunit_token.core.text_medium,
         opacity: 0.38,
       },
       "&.Mui-error": {
-        color: token.core.text_error,
+        color: lunit_token.core.text_error,
       },
     },
   }),
@@ -279,16 +282,16 @@ const BaseTextField = styled(MuiTextField, {
   ({
     theme: {
       typography,
-      palette: { token },
+      palette: { lunit_token },
     },
     multiline,
     textFieldSize,
     hasLeftIcon,
     hasRightIcon,
   }) => ({
-    ...commonStyle({ token }),
+    ...commonStyle({ lunit_token }),
     ...sizeStyle({
-      token,
+      lunit_token,
       textFieldSize,
       hasLeftIcon,
       hasRightIcon,
@@ -309,7 +312,7 @@ const IconWrapper = styled("div")(({ theme }) => ({
   "& svg": {
     width: "20px",
     height: "20px",
-    color: theme.palette.token.core.text_normal,
+    color: theme.palette.lunit_token.core.text_normal,
   },
 }));
 

package/src/components/TextField/TextField.tsx

@@ -11,7 +11,7 @@ import type {
 
 const SingleTextField = (props: SingleTextFieldProps) => {
   const {
-    size,
+    size = "small",
     leftIcon,
     rightIcon,
     leftIconSx,
@@ -48,7 +48,7 @@ const SingleTextField = (props: SingleTextFieldProps) => {
 };
 
 const MultiTextField = ({
-  size,
+  size = "small",
   onChange,
   ...restProps
 }: MultiTextFieldProps) => {
@@ -58,7 +58,7 @@ const MultiTextField = ({
 const TextField = (props: TextFieldProps) => {
   const {
     rows,
-    size = "small",
+    size,
     multiline = false,
     variant = "outlined",
     ...restProps

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

@@ -10,7 +10,7 @@ export interface BaseTextFieldProps
   /**
    * The design system TextField variable is outlined fixed.
    */
-  variant: "outlined";
+  variant?: "outlined";
   value?: string;
   helperText?: string;
 
@@ -21,7 +21,6 @@ export interface BaseTextFieldProps
 }
 
 export interface SingleTextFieldProps extends BaseTextFieldProps {
-  size: TextFieldSize;
   leftIcon?: JSX.Element;
   rightIcon?: JSX.Element;
   leftIconSx?: SxProps;
@@ -32,7 +31,6 @@ export interface SingleTextFieldProps extends BaseTextFieldProps {
 
 export interface MultiTextFieldProps extends BaseTextFieldProps {
   rows?: number | string;
-  size: TextFieldSize;
 }
 
 export type TextFieldProps = SingleTextFieldProps | MultiTextFieldProps;

package/src/components/Toast/Toast.styled.ts

@@ -10,8 +10,8 @@ export const StyledToast = styled(Alert)(({ theme, severity }) => {
     "&.MuiAlert-root": {
       padding: "8px 16px 8px 16px",
       margin: 0,
-      color: theme.palette.token.core.text_normal,
-      backgroundColor: theme.palette.token.core.bg_03,
+      color: theme.palette.lunit_token.core.text_normal,
+      backgroundColor: theme.palette.lunit_token.core.bg_03,
       borderRadius: "8px",
     },
     "& .MuiAlert-icon": {
@@ -42,7 +42,7 @@ export const StyledToast = styled(Alert)(({ theme, severity }) => {
       marginRight: "0px",
       padding: 0,
       "& .MuiSvgIcon-root": {
-        color: theme.palette.token.core.text_normal,
+        color: theme.palette.lunit_token.core.text_normal,
       },
     },
   };

package/src/components/Toast/Toast.tsx

@@ -18,6 +18,7 @@ const MAPPED_ICON = {
   error: <Error variant="filled" />,
 };
 
+// this forwardRef is required for using with Snackbar component
 const Toast = forwardRef<HTMLDivElement, ToastProps>((props, ref) => {
   const {
     severity = "normal",
@@ -62,5 +63,4 @@ const Toast = forwardRef<HTMLDivElement, ToastProps>((props, ref) => {
   );
 });
 
-// this forwardRef is required for using with Snackbar component
 export default Toast;

package/src/components/Toast/Toast.utils.ts

@@ -6,12 +6,12 @@ export const getIconColor = (
 ) => {
   switch (severity) {
     case "info":
-      return theme.palette.token.core.icon_info_02;
+      return theme.palette.lunit_token.core.icon_info_02;
     case "warning":
-      return theme.palette.token.core.icon_warning_02;
+      return theme.palette.lunit_token.core.icon_warning_02;
     case "error":
-      return theme.palette.token.core.icon_error_02;
+      return theme.palette.lunit_token.core.icon_error_02;
     default:
-      return theme.palette.token.core.icon_success_02;
+      return theme.palette.lunit_token.core.icon_success_02;
   }
 };

package/src/components/Toast/index.tsx

@@ -1 +1,2 @@
-export { default as Toast } from './Toast'
+export { default } from "./Toast";
+export type { ToastProps } from "./Toast.types";

package/src/components/Toggle/Toggle.styled.ts

@@ -1,6 +1,6 @@
 import { styled, Switch as MuiSwitch, SwitchProps } from "@mui/material";
 interface ToggleProps extends SwitchProps {
-  toggleSize: 'medium' | 'large'
+  toggleSize: "medium" | "large";
 }
 
 const toggleStyles = {
@@ -19,15 +19,15 @@ const toggleStyles = {
       transition: "all 100ms ease-in-out",
     },
     switchChecked: {
-      transform: 'translateX(10px)',
+      transform: "translateX(10px)",
     },
     thumb: {
-        width: 14,
-        height: 14,
-    }
+      width: 14,
+      height: 14,
+    },
   },
   large: {
-    root:{
+    root: {
       width: 44,
       height: 24,
       borderRadius: 12,
@@ -41,20 +41,20 @@ const toggleStyles = {
       transition: "all 150ms ease-in-out",
     },
     switchChecked: {
-      transform: 'translateX(20px)',
+      transform: "translateX(20px)",
     },
     thumb: {
       width: 20,
       height: 20,
     },
   },
-}
+};
 
 const indeterminateStyles = {
   large: {
     switchChecked: {
-        top: 8,
-        left: -8,
+      top: 8,
+      left: -8,
     },
     track: {
       borderRadius: 12,
@@ -67,8 +67,8 @@ const indeterminateStyles = {
   },
   medium: {
     switchChecked: {
-        top: 6,
-        left: -4,
+      top: 6,
+      left: -4,
     },
     track: {
       borderRadius: 12,
@@ -78,28 +78,29 @@ const indeterminateStyles = {
       width: 12,
       borderRadius: 2,
     },
-  }
-}
+  },
+};
 
 export const CommonToggle = styled(MuiSwitch, {
-  shouldForwardProp: (props) => props !== 'toggleSize',
+  shouldForwardProp: (props) => props !== "toggleSize",
 })<ToggleProps>(({ theme, toggleSize, disabled }) => {
-  const checkedColor = theme.palette.token.component.selectcontrol_on;
-  const uncheckedColor = theme.palette.token.component.selectcontrol_off;
-  const handlerColor = theme.palette.token.component.selectcontrol_handler;
+  const checkedColor = theme.palette.lunit_token.component.selectcontrol_on;
+  const uncheckedColor = theme.palette.lunit_token.component.selectcontrol_off;
+  const handlerColor =
+    theme.palette.lunit_token.component.selectcontrol_handler;
 
   const toggleStyle = toggleStyles[toggleSize];
   const toggleOpacity = disabled ? 0.38 : 1;
 
   return {
     ...toggleStyle.root,
-    display: 'flex',
+    display: "flex",
     padding: 0,
     overflow: "visible",
     backgroundColor: "transparent",
     opacity: toggleOpacity,
     "& .Mui-focusVisible": {
-       // clear default focus style
+      // clear default focus style
       boxShadow: "none",
       background: "transparent",
       borderColor: "transparent",
@@ -112,51 +113,53 @@ export const CommonToggle = styled(MuiSwitch, {
         boxSizing: "border-box",
         top: -3, // border 1px + offset 2px
         left: -3, // border 1px + offset 2px
-      }
+      },
     },
-    '& .MuiSwitch-track': {
+    "& .MuiSwitch-track": {
       opacity: 1,
       borderRadius: 12,
       backgroundColor: uncheckedColor,
     },
-    '& .MuiSwitch-thumb': {
+    "& .MuiSwitch-thumb": {
       ...toggleStyle.thumb,
       boxShadow: "0px 0px 1px rgba(0, 0, 0, 0.4)",
     },
-    '& .MuiSwitch-switchBase': {
+    "& .MuiSwitch-switchBase": {
       ...toggleStyle.switch,
       padding: 2,
       opacity: 1,
-      '&.Mui-checked': {
+      "&.Mui-checked": {
         ...toggleStyle.switchChecked,
         color: handlerColor,
-        '& + .MuiSwitch-track': {
+        "& + .MuiSwitch-track": {
           opacity: 1,
           backgroundColor: checkedColor,
         },
       },
     },
-    '& .Mui-disabled + .MuiSwitch-track': {
+    "& .Mui-disabled + .MuiSwitch-track": {
       opacity: 1,
     },
-  }});
+  };
+});
 
 export const CommonIndeterminateToggle = styled(CommonToggle, {
-  shouldForwardProp: (props) => props !== 'toggleSize',
+  shouldForwardProp: (props) => props !== "toggleSize",
 })(({ toggleSize }) => {
   const indeterminateStyle = indeterminateStyles[toggleSize];
 
   return {
-  padding: 0,
-  cursor: "pointer",
-  '& .MuiSwitch-switchBase.Mui-checked': {
+    padding: 0,
+    cursor: "pointer",
+    "& .MuiSwitch-switchBase.Mui-checked": {
       ...indeterminateStyle.switchChecked,
-      '& + .MuiSwitch-track': {
+      "& + .MuiSwitch-track": {
         ...indeterminateStyle.track,
+      },
     },
-  },
-  '& .MuiSwitch-thumb': {
-    ...indeterminateStyle.thumb,
-    boxShadow: "none",
-  },
-}});
+    "& .MuiSwitch-thumb": {
+      ...indeterminateStyle.thumb,
+      boxShadow: "none",
+    },
+  };
+});

package/src/components/ToggleButton/ToggleButton.styled.ts

@@ -19,7 +19,7 @@ export const CustomToggleButton = styled(MuiToggleButton, {
   ({
     theme: {
       typography,
-      palette: { token },
+      palette: { lunit_token },
     },
     kind,
     size,
@@ -30,22 +30,22 @@ export const CustomToggleButton = styled(MuiToggleButton, {
   }) => {
     return {
       border: "none",
-      ...commonStyle({ token }),
+      ...commonStyle({ lunit_token }),
       ...iconStyle({ size, hasIconOnly }),
       ...sizeStyle({ size, kind, hasIconOnly, selected, typography }),
-      ...kindStyle({ kind, color, token }),
+      ...kindStyle({ kind, color, lunit_token }),
       ...(selectedColor === "primary" && {
         "&.Mui-selected, &.Mui-selected:hover": {
           border: "none",
-          backgroundColor: token.component.btn_selected_primary_bg,
-          color: token.component.btn_selected_primary_text,
+          backgroundColor: lunit_token.component.btn_selected_primary_bg,
+          color: lunit_token.component.btn_selected_primary_text,
         },
       }),
       ...(selectedColor === "secondary" && {
         "&.Mui-selected, &.Mui-selected:hover": {
           border: "none",
-          backgroundColor: token.component.btn_selected_secondary_bg,
-          color: token.component.btn_selected_secondary_text,
+          backgroundColor: lunit_token.component.btn_selected_secondary_bg,
+          color: lunit_token.component.btn_selected_secondary_text,
         },
       }),
     };

package/src/components/Typography/index.ts

@@ -0,0 +1,9 @@
+import Typography from "@mui/material/Typography";
+import type { TypographyPropsVariantOverridesType } from "../../foundation/Typography";
+
+declare module "@mui/material/Typography" {
+  interface TypographyPropsVariantOverrides
+    extends TypographyPropsVariantOverridesType {}
+}
+
+export default Typography;

package/src/foundation/Elevation/index.ts

@@ -2,10 +2,10 @@ import paletteOptions from "../colors";
 import { createCSSVarNames, createCSSVars } from "./utils";
 
 export const shadows = {
-  shadow1: `0px 4px 8px ${paletteOptions.token.core.shadow_01}`,
-  shadow2: `0px 3px 12px ${paletteOptions.token.core.shadow_02}`,
-  shadow3: `0px 12px 24px ${paletteOptions.token.core.shadow_03}`,
-  shadow4: `0px 12px 44px ${paletteOptions.token.core.shadow_04}`,
+  shadow1: `0px 4px 8px ${paletteOptions.lunit_token.core.shadow_01}`,
+  shadow2: `0px 3px 12px ${paletteOptions.lunit_token.core.shadow_02}`,
+  shadow3: `0px 12px 24px ${paletteOptions.lunit_token.core.shadow_03}`,
+  shadow4: `0px 12px 44px ${paletteOptions.lunit_token.core.shadow_04}`,
 };
 
 const shadowVars = createCSSVarNames(shadows);

package/src/foundation/Typography/index.ts

@@ -24,11 +24,7 @@ declare module "@mui/material/styles" {
   interface TypographyVariantsOptions extends Partial<DSVariantsType> {}
 }
 
-type TypographyPropsVariantOverridesType = Record<DSVariants, true>;
-declare module "@mui/material/Typography" {
-  interface TypographyPropsVariantOverrides
-    extends TypographyPropsVariantOverridesType {}
-}
+export type TypographyPropsVariantOverridesType = Record<DSVariants, true>;
 
 const fontFamily = [
   "Pretendard",
@@ -93,4 +89,4 @@ export const createTypographyCssBaseline = () => {
   };
 };
 
-export default typographyOptions;
+export default typographyOptions;