@lunit/design-system 1.0.0-a.1 → 1.0.0-a.2

package/src/components/Toggle/Toggle.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import { CommonToggle, CommonIndeterminateToggle } from './Toggle.styled'
+import type { ToggleProps } from './Toggle.types'
+
+
+const Toggle = (props: ToggleProps) => {
+  const { size = "medium", indeterminate = false, disableRipple, ...switchProps } = props
+
+  if (indeterminate) {
+    const { checked: _, ...restProps } = switchProps;
+    // can't use checked props with indeterminate
+      return <CommonIndeterminateToggle toggleSize={size} checked focusRipple={false} disableRipple={disableRipple} {...restProps} />
+  }
+
+  return  <CommonToggle toggleSize={size} focusRipple={false} disableRipple={disableRipple} {...switchProps}/>
+}
+
+export default Toggle

package/src/components/Toggle/Toggle.types.ts

@@ -0,0 +1,14 @@
+import type { SwitchProps } from "@mui/material"
+
+export interface ToggleProps extends Omit<SwitchProps, "size" > {
+  /**
+   * The size of the component.
+   * @default medium
+   */
+  size?: 'medium' | 'large'
+  /**
+  * If `true`, the component has consistent 'checked' value and change shape.
+  * @default false
+  */
+  indeterminate?: boolean
+}

package/src/components/Toggle/index.ts

@@ -0,0 +1 @@
+export { default } from "./Toggle";

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

@@ -0,0 +1,58 @@
+import { styled } from "@mui/material/styles";
+import { ToggleButton as MuiToggleButton } from "@mui/material";
+
+import type { ToggleButtonProps } from "../ToggleButton/ToggleButton.types";
+import {
+  commonStyle,
+  sizeStyle,
+  kindStyle,
+  iconStyle,
+} from "../Button/Button.styled";
+
+type CustomToggleButtonProps = ToggleButtonProps & { hasIconOnly: boolean };
+
+export const CustomToggleButton = styled(MuiToggleButton, {
+  shouldForwardProp: (prop: string) => {
+    return !["icon", "kind", "selectedColor", "hasIconOnly"].includes(prop);
+  },
+})<CustomToggleButtonProps>(
+  ({
+    theme: {
+      typography,
+      palette: { token },
+    },
+    kind,
+    size,
+    color,
+    selectedColor,
+    hasIconOnly,
+    selected,
+  }) => {
+    return {
+      border: "none",
+      ...commonStyle({ token }),
+      ...iconStyle({ size, hasIconOnly }),
+      ...sizeStyle({ size, kind, hasIconOnly, selected, typography }),
+      ...kindStyle({ kind, color, token }),
+      ...(selectedColor === "primary" && {
+        "&.Mui-selected, &.Mui-selected:hover": {
+          border: "none",
+          backgroundColor: token.component.btn_selected_primary_bg,
+          color: 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,
+        },
+      }),
+    };
+  }
+);
+
+export const IconAndChildrenWrapper = styled("div")({
+  display: "flex",
+  alignItems: "center",
+});

package/src/components/ToggleButton/ToggleButton.tsx

@@ -0,0 +1,89 @@
+import React from "react";
+import {
+  CustomToggleButton,
+  IconAndChildrenWrapper,
+} from "./ToggleButton.styled";
+import type { ToggleButtonProps } from "./ToggleButton.types";
+
+const ToggleButton = (props: ToggleButtonProps) => {
+  const {
+    kind = "contained",
+    size = "small",
+    color = "primary",
+    selectedColor = "primary",
+    className = "",
+    icon,
+    selected,
+    children,
+    ...buttonProps
+  } = props;
+
+  const hasIconOnly = Boolean(icon && !children);
+  const excludeToggleGroupClass = className
+    .replace("MuiToggleButtonGroup-grouped", "")
+    .replace("MuiToggleButtonGroup-groupedHorizontal", "");
+
+  return (
+    <>
+      {kind === "contained" || kind === "ghost" ? (
+        <CustomToggleButton
+          className={`${kind} ${excludeToggleGroupClass}`}
+          selected={selected}
+          kind={kind}
+          color={color}
+          size={size}
+          hasIconOnly={hasIconOnly}
+          selectedColor={selectedColor}
+          disableRipple
+          disableFocusRipple
+          {...buttonProps}
+        >
+          {!hasIconOnly ? (
+            <>
+              {icon ? (
+                <IconAndChildrenWrapper>
+                  {icon}
+                  {children}
+                </IconAndChildrenWrapper>
+              ) : (
+                children
+              )}
+            </>
+          ) : (
+            icon
+          )}
+        </CustomToggleButton>
+      ) : (
+        <CustomToggleButton
+          className={`outlined ${excludeToggleGroupClass}`}
+          selected={selected}
+          kind="outlined"
+          color="primary"
+          size={size}
+          hasIconOnly={hasIconOnly}
+          selectedColor={selectedColor}
+          disableRipple
+          disableFocusRipple
+          {...buttonProps}
+        >
+          {!hasIconOnly ? (
+            <>
+              {icon ? (
+                <IconAndChildrenWrapper>
+                  {icon}
+                  {children}
+                </IconAndChildrenWrapper>
+              ) : (
+                children
+              )}
+            </>
+          ) : (
+            icon
+          )}
+        </CustomToggleButton>
+      )}
+    </>
+  );
+};
+
+export default ToggleButton;

package/src/components/ToggleButton/ToggleButton.types.ts

@@ -0,0 +1,28 @@
+import type { ToggleButtonProps as MuiToggleButtonProps } from "@mui/material";
+
+interface ToggleButtonBaseProps extends MuiToggleButtonProps {
+  selectedColor?: "primary" | "secondary";
+  icon?: React.ReactNode;
+}
+interface ContainedToggleButtonProps
+  extends Omit<ToggleButtonBaseProps, "variant"> {
+  kind?: "contained";
+  color?: "primary" | "secondary";
+}
+
+interface GhostToggleButtonProps
+  extends Omit<ToggleButtonBaseProps, "variant"> {
+  kind?: "ghost";
+  color?: "primary" | "secondary";
+}
+
+interface OutlinedToggleButtonProps
+  extends Omit<ToggleButtonBaseProps, "variant"> {
+  kind?: "outlined";
+  color?: "primary";
+}
+
+export type ToggleButtonProps =
+  | ContainedToggleButtonProps
+  | GhostToggleButtonProps
+  | OutlinedToggleButtonProps;

package/src/components/ToggleButton/index.ts

@@ -0,0 +1 @@
+export { default } from "./ToggleButton";

package/src/components/ToggleButtonGroup/ToggleButtonGroup.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import MuiToggleButtonGroup, {
+  ToggleButtonGroupProps,
+} from "@mui/material/ToggleButtonGroup";
+
+const ToggleButtonGroup = ({
+  size = "small",
+  ...props
+}: ToggleButtonGroupProps) => {
+  return <MuiToggleButtonGroup size={size} {...props} />;
+};
+
+export default ToggleButtonGroup;

package/src/components/ToggleButtonGroup/index.tsx

@@ -0,0 +1 @@
+export { default } from "./ToggleButtonGroup";

package/src/components/Tooltip/Tooltip.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+import { Box } from "@mui/material";
+
+const Tooltip = () => {
+  return <Box>Tooltip</Box>;
+};
+
+export default Tooltip;

package/src/components/Tooltip/index.ts

@@ -0,0 +1 @@
+export { default } from "./Tooltip";

package/src/components/index.ts

@@ -0,0 +1,9 @@
+// re-export any MUI styleOverrides for components
+
+import { Components, Theme } from "@mui/material";
+
+export const componentsCssBaseline: Components<Theme>["MuiCssBaseline"] = {
+  styleOverrides: {
+    // @todo add any css baseline necessary for components
+  },
+};

package/src/foundation/Elevation/index.ts

@@ -0,0 +1,72 @@
+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}`,
+};
+
+const shadowVars = createCSSVarNames(shadows);
+
+export const elevations = {
+  elevation_00: "none",
+  elevation_01: `${shadowVars.shadow1}, ${shadowVars.shadow2}`,
+  elevation_02: `${shadowVars.shadow3}, ${shadowVars.shadow4}`,
+};
+
+export const elevationOptions = {
+  ...shadows,
+  ...elevations,
+};
+
+export const createElevationCssBaseline = () => {
+  return {
+    // :root에 모든 theme이 정의되어 있지 않으므로 surface*에서 찾아야 함
+    ".light1, .light2, .dark1, .dark2, .dark3, .dark4": {
+      ...createCSSVars(shadows),
+      ...createCSSVars(elevations),
+      // `--elevation-shadow`가 정의되지 않아도 `box-shadow: var(--elevation-shadow)` 구문을 해석하려면 필요함
+      "--elevation-shadow": "none",
+    },
+    // Default component styles
+    ".MuiPaper-root": {
+      "--elevation-shadow": elevationOptions.elevation_02,
+    },
+    ".MuiDialog-paper": {
+      "--elevation-shadow": elevationOptions.elevation_02,
+    },
+    ".MuiPopover-paper": {
+      "--elevation-shadow": elevationOptions.elevation_02,
+    },
+    // Date Range Picker, Select 등의 Menu element는 MuiMenu-paper에서 상속
+    ".MuiMenu-paper": {
+      "--elevation-shadow": elevationOptions.elevation_01,
+    },
+    ".MuiTooltip-tooltip": {
+      "--elevation-shadow": elevationOptions.elevation_01,
+    },
+    ".MuiAlert-root": {
+      "--elevation-shadow": elevationOptions.elevation_02,
+    },
+
+    // Alternative to Paper `elevation` prop
+    ".elevation0, .elevation1, .elevation2": {
+      boxShadow: "var(--elevation-shadow)",
+    },
+    ".elevation3, .elevation4, .elevation5, .elevation6, .elevation7, .elevation8, .elevation9, .elevation10, .elevation11, .elevation12, .elevation13, .elevation14, .elevation15, .elevation16, .elevation17, .elevation18, .elevation19, .elevation20, .elevation21, .elevation22, .elevation23, .elevation24":
+      {
+        boxShadow: "none",
+      },
+    ".elevation0": {
+      "--elevation-shadow": elevationOptions.elevation_00,
+    },
+    ".elevation1": {
+      "--elevation-shadow": elevationOptions.elevation_01,
+    },
+    ".elevation2": {
+      "--elevation-shadow": elevationOptions.elevation_02,
+    },
+  };
+};

package/src/foundation/Elevation/utils.ts

@@ -0,0 +1,11 @@
+export const createCSSVars = <T extends Record<string, string>>(tokens: T) =>
+  Object.entries(tokens).reduce((vars, [name, value]) => {
+    vars[`--${name}` as keyof T] = value;
+    return vars;
+  }, {} as Record<keyof T, string>);
+
+export const createCSSVarNames = <T extends Record<string, string>>(tokens: T) =>
+  Object.entries(tokens).reduce((vars, [name, value]) => {
+    vars[name as keyof T] = `var(--${name})`;
+    return vars;
+  }, {} as Record<keyof T, string>);

package/src/foundation/Typography/index.ts

@@ -0,0 +1,96 @@
+import type { TypographyOptions } from "@mui/material/styles/createTypography";
+import { fontVariants, cssVariables } from "./tokens";
+
+type DSVariants =
+  | "headline1"
+  | "headline2"
+  | "headline3"
+  | "headline4"
+  | "headline5"
+  | "body1_16_semibold"
+  | "body1_16_regular"
+  | "body2_14_bold"
+  | "body2_14_medium"
+  | "body2_14_regular"
+  | "body3_12_semibold"
+  | "body3_12_regular"
+  | "button1"
+  | "button2";
+
+type DSVariantsType = Record<DSVariants, React.CSSProperties>;
+
+declare module "@mui/material/styles" {
+  interface TypographyVariants extends DSVariantsType {}
+  interface TypographyVariantsOptions extends Partial<DSVariantsType> {}
+}
+
+type TypographyPropsVariantOverridesType = Record<DSVariants, true>;
+declare module "@mui/material/Typography" {
+  interface TypographyPropsVariantOverrides
+    extends TypographyPropsVariantOverridesType {}
+}
+
+const fontFamily = [
+  "Pretendard",
+  "-apple-system",
+  "BlinkMacSystemFont",
+  "system-ui",
+  "Roboto",
+  '"Helvetica Neue"',
+  '"Segoe UI"',
+  '"Apple SD Gothic Neo"',
+  '"Noto Sans KR"',
+  '"Malgun Gothic"',
+  '"Apple Color Emoji"',
+  '"Segoe UI Emoji"',
+  '"Segoe UI Symbol"',
+  "sans-serif",
+].join(",");
+
+const typographyOptions: TypographyOptions = {
+  fontFamily,
+  ...{
+    ...fontVariants,
+    // alias Mui Typography variants
+    h1: fontVariants.headline1,
+    h2: fontVariants.headline2,
+    h3: fontVariants.headline3,
+    h4: fontVariants.headline4,
+    h5: fontVariants.headline5,
+    h6: fontVariants.headline5,
+    body1: fontVariants.body1_16_regular,
+    body2: fontVariants.body2_14_regular,
+    button: fontVariants.button2,
+  },
+};
+
+export const typographyDefaultProps = {
+  variantMapping: {
+    headline1: "h1",
+    headline2: "h2",
+    headline3: "h3",
+    headline4: "h4",
+    headline5: "h6",
+    body1_16_semibold: "p",
+    body1_16_regular: "p",
+    body2_14_bold: "p",
+    body2_14_medium: "p",
+    body2_14_regular: "p",
+    body3_12_semibold: "p",
+    body3_12_regular: "p",
+  },
+};
+
+export const createTypographyCssBaseline = () => {
+  return {
+    html: {
+      fontFamily,
+      fontFeatureSettings: `'tnum', 'ss01', 'ss02', 'ss08'`,
+    },
+    ":root": {
+      ...cssVariables,
+    },
+  };
+};
+
+export default typographyOptions;

package/src/foundation/Typography/tokens.ts

@@ -0,0 +1,162 @@
+import type { TypographyStyleOptions } from "@mui/material/styles/createTypography";
+
+const fontWeights = {
+  "--font-weight-bold": 700,
+  "--font-weight-semibold": 600,
+  "--font-weight-medium": 500,
+  "--font-weight-regular": 400,
+} as const;
+
+const headline = {
+  "--headline1-font-weight": "var(--font-weight-semibold)",
+  "--headline1-font-size": "52px",
+  "--headline1-line-height": "68px",
+  "--headline2-font-weight": "var(--font-weight-bold)",
+  "--headline2-font-size": "38px",
+  "--headline2-line-height": "48px",
+  "--headline3-font-weight": "var(--font-weight-semibold)",
+  "--headline3-font-size": "24px",
+  "--headline3-line-height": "36px",
+  "--headline4-font-weight": "var(--font-weight-semibold)",
+  "--headline4-font-size": "20px",
+  "--headline4-line-height": "28px",
+  "--headline5-font-weight": "var(--font-weight-semibold)",
+  "--headline5-font-size": "16px",
+  "--headline5-line-height": "24px",
+} as const;
+
+const body = {
+  "--body1-16-semibold-font-weight": "var(--font-weight-semibold)",
+  "--body1-16-semibold-font-size": "16px",
+  "--body1-16-semibold-line-height": "24px",
+  "--body1-16-regular-font-weight": "var(--font-weight-regular)",
+  "--body1-16-regular-font-size": "16px",
+  "--body1-16-regular-line-height": "24px",
+  "--body2-14-bold-font-weight": "var(--font-weight-bold)",
+  "--body2-14-bold-font-size": "14px",
+  "--body2-14-bold-line-height": "20px",
+  "--body2-14-medium-font-weight": "var(--font-weight-medium)",
+  "--body2-14-medium-font-size": "14px",
+  "--body2-14-medium-line-height": "20px",
+  "--body2-14-regular-font-weight": "var(--font-weight-regular)",
+  "--body2-14-regular-font-size": "14px",
+  "--body2-14-regular-line-height": "20px",
+  "--body3-12-semibold-font-weight": "var(--font-weight-semibold)",
+  "--body3-12-semibold-font-size": "12.4px",
+  "--body3-12-semibold-line-height": "16px",
+  "--body3-12-regular-font-weight": "var(--font-weight-regular)",
+  "--body3-12-regular-font-size": "12.4px",
+  "--body3-12-regular-line-height": "16px",
+} as const;
+
+const etc = {
+  "--overline-font-weight": "var(--font-weight-medium)",
+  "--overline-font-size": "14px",
+  "--overline-line-height": "20px",
+  "--button1-font-weight": "var(--font-weight-medium)",
+  "--button1-font-size": "16px",
+  "--button1-line-height": "22px",
+  "--button2-font-weight": "var(--font-weight-medium)",
+  "--button2-font-size": "14px",
+  "--button2-line-height": "20px",
+  "--caption-font-weight": "var(--font-weight-medium)",
+  "--caption-font-size": "12px",
+  "--caption-line-height": "16px",
+} as const;
+
+const fontVariants: Record<string, TypographyStyleOptions> = {
+  headline1: {
+    fontWeight: "var(--headline1-font-weight)",
+    fontSize: "var(--headline1-font-size)",
+    lineHeight: "var(--headline1-line-height)",
+  },
+  headline2: {
+    fontWeight: "var(--headline2-font-weight)",
+    fontSize: "var(--headline2-font-size)",
+    lineHeight: "var(--headline2-line-height)",
+  },
+  headline3: {
+    fontWeight: "var(--headline3-font-weight)",
+    fontSize: "var(--headline3-font-size)",
+    lineHeight: "var(--headline3-line-height)",
+  },
+  headline4: {
+    fontWeight: "var(--headline4-font-weight)",
+    fontSize: "var(--headline4-font-size)",
+    lineHeight: "var(--headline4-line-height)",
+  },
+  headline5: {
+    fontWeight: "var(--headline5-font-weight)",
+    fontSize: "var(--headline5-font-size)",
+    lineHeight: "var(--headline5-line-height)",
+  },
+  body1_16_semibold: {
+    fontWeight: "var(--body1-16-semibold-font-weight)",
+    fontSize: "var(--body1-16-semibold-font-size)",
+    lineHeight: "var(--body1-16-semibold-line-height)",
+  },
+  body1_16_regular: {
+    fontWeight: "var(--body1-16-regular-font-weight)",
+    fontSize: "var(--body1-16-regular-font-size)",
+    lineHeight: "var(--body1-16-regular-line-height)",
+  },
+  body2_14_bold: {
+    fontWeight: "var(--body2-14-bold-font-weight)",
+    fontSize: "var(--body2-14-bold-font-size)",
+    lineHeight: "var(--body2-14-bold-line-height)",
+  },
+  body2_14_medium: {
+    fontWeight: "var(--body2-14-medium-font-weight)",
+    fontSize: "var(--body2-14-medium-font-size)",
+    lineHeight: "var(--body2-14-medium-line-height)",
+  },
+  body2_14_regular: {
+    fontWeight: "var(--body2-14-regular-font-weight)",
+    fontSize: "var(--body2-14-regular-font-size)",
+    lineHeight: "var(--body2-14-regular-line-height)",
+  },
+  body3_12_semibold: {
+    fontWeight: "var(--body3-12-semibold-font-weight)",
+    fontSize: "var(--body3-12-semibold-font-size)",
+    lineHeight: "var(--body3-12-semibold-line-height)",
+  },
+  body3_12_regular: {
+    fontWeight: "var(--body3-12-regular-font-weight)",
+    fontSize: "var(--body3-12-regular-font-size)",
+    lineHeight: "var(--body3-12-regular-line-height)",
+  },
+  overline: {
+    fontWeight: "var(--overline-font-weight)",
+    fontSize: "var(--overline-font-size)",
+    lineHeight: "var(--overline-line-height)",
+    letterSpacing: "1px",
+    textTransform: "uppercase",
+  },
+  button1: {
+    fontWeight: "var(--button1-font-weight)",
+    fontSize: "var(--button1-font-size)",
+    lineHeight: "var(--button1-line-height)",
+    textTransform: "capitalize",
+  },
+  button2: {
+    fontWeight: "var(--button2-font-weight)",
+    fontSize: "var(--button2-font-size)",
+    lineHeight: "var(--button2-line-height)",
+    letterSpacing: "0.2px",
+    textTransform: "capitalize",
+  },
+  caption: {
+    fontWeight: "var(--caption-font-weight)",
+    fontSize: "var(--caption-font-size)",
+    lineHeight: "var(--caption-line-height)",
+  },
+};
+
+export const cssVariables = {
+  ...fontWeights,
+  ...headline,
+  ...body,
+  ...etc,
+};
+
+export { fontVariants };

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

@@ -0,0 +1,27 @@
+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",
+};
+
+export const blueText = {
+  5: grey[95],
+  10: grey[95],
+  20: grey[95],
+  30: grey[95],
+  40: grey[95],
+  50: grey[5],
+  60: grey[5],
+  70: grey[5],
+  80: grey[5],
+  90: grey[5],
+};

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

@@ -0,0 +1,27 @@
+import { grey } from "./grey";
+
+export const green = {
+  5: "#EBFFF0",
+  10: "#B4EFC4",
+  20: "#6FDC8C",
+  30: "#42BE65",
+  40: "#24A148",
+  50: "#198038",
+  60: "#0E6027",
+  70: "#044317",
+  80: "#022D0D",
+  90: "#071908",
+};
+
+export const greenText = {
+  5: grey[95],
+  10: grey[95],
+  20: grey[95],
+  30: grey[95],
+  40: grey[95],
+  50: grey[5],
+  60: grey[5],
+  70: grey[5],
+  80: grey[5],
+  90: grey[5],
+};