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

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

@@ -70,7 +70,7 @@ const getTextFieldPaddingBySize = ({
       });
 };
 
-const commonStyle = ({ token }: { token: ColorToken }) => ({
+const commonStyle = ({ lunit_token }: { lunit_token: ColorToken }) => ({
   "&.MuiTextField-root": {
     width: "100%",
   },
@@ -82,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": {
@@ -110,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: '""',
@@ -129,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,
       },
     },
   },
@@ -142,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,
@@ -157,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({
@@ -179,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,
       },
     },
   }),
@@ -214,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,
       },
     },
   }),
@@ -249,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,
       },
     },
   }),
@@ -282,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,
@@ -312,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/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.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/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/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/colors/index.ts

@@ -11,7 +11,7 @@ export type GreyColor = Record<keyof typeof base.grey, PaletteColor>;
 
 declare module "@mui/material/styles/createPalette" {
   interface PaletteOptions {
-    lunit?: {
+    lunit_global?: {
       grey: GreyColor;
       blue: BaseColor;
       green: BaseColor;
@@ -22,11 +22,11 @@ declare module "@mui/material/styles/createPalette" {
       red: BaseColor;
       yellow: BaseColor;
     };
-    token?: ColorToken;
+    lunit_token?: ColorToken;
   }
 
   interface Palette {
-    lunit: {
+    lunit_global: {
       grey: GreyColor;
       blue: BaseColor;
       green: BaseColor;
@@ -37,7 +37,7 @@ declare module "@mui/material/styles/createPalette" {
       red: BaseColor;
       yellow: BaseColor;
     };
-    token: ColorToken;
+    lunit_token: ColorToken;
   }
 }
 
@@ -123,29 +123,32 @@ export const createColorCssBaseline = () => {
 };
 
 // TODO: TextColors 삭제하고 관련된 설정 수정하기
-const lunitColors: PaletteOptions["lunit"] = ((): PaletteOptions["lunit"] => {
-  const ret: any = {};
-  for (const colorKey in base) {
-    if (base[`${colorKey}Text` as ColorKey]) {
-      const baseColors = base[colorKey as ColorKey];
-      const textColors = base[`${colorKey}Text` as ColorKey];
-      ret[colorKey] = {};
-      for (const key in baseColors) {
-        if (baseColors.hasOwnProperty(key)) {
-          const color = baseColors[Number(key) as keyof typeof baseColors];
-          const textColor = textColors[Number(key) as keyof typeof textColors];
-          ret[colorKey][Number(key)] = {
-            light: color,
-            main: color,
-            dark: color,
-            contrastText: textColor,
-          };
+// TODO: opacity 글로벌 팔레트에 추가 여부 확인해서 작업하기
+const lunitColors: PaletteOptions["lunit_global"] =
+  ((): PaletteOptions["lunit_global"] => {
+    const ret: any = {};
+    for (const colorKey in base) {
+      if (base[`${colorKey}Text` as ColorKey]) {
+        const baseColors = base[colorKey as ColorKey];
+        const textColors = base[`${colorKey}Text` as ColorKey];
+        ret[colorKey] = {};
+        for (const key in baseColors) {
+          if (baseColors.hasOwnProperty(key)) {
+            const color = baseColors[Number(key) as keyof typeof baseColors];
+            const textColor =
+              textColors[Number(key) as keyof typeof textColors];
+            ret[colorKey][Number(key)] = {
+              light: color,
+              main: color,
+              dark: color,
+              contrastText: textColor,
+            };
+          }
         }
       }
     }
-  }
-  return ret;
-})();
+    return ret;
+  })();
 
 const paletteOptions = {
   primary: {
@@ -167,8 +170,8 @@ const paletteOptions = {
     main: base.green[40], // core.text_success.dark1
   },
   grey: base.greyForMUI,
-  lunit: lunitColors,
-  token: {
+  lunit_global: lunitColors,
+  lunit_token: {
     core: {
       bg_01: "var(--bg_01)",
       bg_02: "var(--bg_02)",

package/src/index.ts

@@ -1,4 +1,4 @@
-export { default as theme } from "./theme";
+export { default as theme, themeOptions } from "./theme";
 export { base as baseColors } from "./foundation/colors";
 
 export { default as Alert } from "./components/Alert";

package/src/stories/components/Alert/Alert.stories.tsx

@@ -62,7 +62,7 @@ const AlertChildrenContentLong = () => {
     <Typography variant="body2_14_regular">
       Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
       tempor incididunt ut{" "}
-      <u style={{ color: theme.palette.token.core.link_primary }}>
+      <u style={{ color: theme.palette.lunit_token.core.link_primary }}>
         labore et dolore
       </u>{" "}
       magna aliqua. A diam sollicitudin tempor id eu nisl nunc mi. Auctor augue

package/src/stories/foundation/Typography/TypographyGroup.tsx

@@ -18,7 +18,7 @@ export const TypographyItem = styled(Box)({
 
 export const TypographyTitle = styled(Typography)(({ theme }) => ({
   width: 200,
-  color: theme.palette.token.core.text_light,
+  color: theme.palette.lunit_token.core.text_light,
 }));
 
 export const TypographyDummy = styled(Typography)({

package/src/stories/foundation/colors/Colors.stories.tsx

@@ -18,7 +18,7 @@ const BaseColors = () => {
   return (
     <Container>
       {map(
-        theme.palette.lunit,
+        theme.palette.lunit_global,
         (colors: BaseColor | GreyColor, paletteKey: string) => (
           <div key={paletteKey}>
             <Typography
@@ -34,8 +34,8 @@ const BaseColors = () => {
               {map(colors, (_: string, colorKey: string) => (
                 <ColorContainer key={colorKey}>
                   <Color
-                    color={`lunit.${paletteKey}.${colorKey}.contrastText`}
-                    bgcolor={`lunit.${paletteKey}.${colorKey}.main`}
+                    color={`lunit_global.${paletteKey}.${colorKey}.contrastText`}
+                    bgcolor={`lunit_global.${paletteKey}.${colorKey}.main`}
                   >
                     <Typography variant="h4">T</Typography>
                   </Color>