@lunit/design-system 1.0.0-a.3 → 1.0.0-a.5

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

@@ -18,7 +18,7 @@ export const StyledToast = styled(Alert)(({ theme, severity }) => {
       height: "36px",
       marginRight: "16px",
       fontSize: 20,
-      color: `${getIconColor(severity)}`,
+      color: `${getIconColor(theme, severity)}`,
       "& .MuiSvgIcon-root": {
         height: "16px",
         width: "16px",

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

@@ -1,7 +1,9 @@
-import theme from "@/theme";
-import type { AlertColor } from "@mui/material";
+import type { AlertColor, Theme } from "@mui/material";
 
-export const getIconColor = (severity: AlertColor | undefined) => {
+export const getIconColor = (
+  theme: Theme,
+  severity: AlertColor | undefined
+) => {
   switch (severity) {
     case "info":
       return theme.palette.token.core.icon_info_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/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/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;

package/src/foundation/colors/index.ts

@@ -197,17 +197,15 @@ const paletteOptions = {
       shadow_04: "var(--shadow_04)",
     },
     component: {
-      btn_contained_primary_bg: "var(--btn_contained_primary_bg)",
-      btn_contained_primary_text: "var(--btn_contained_primary_text)",
-      btn_contained_secondary_bg: "var(--btn_contained_secondary_bg)",
-      btn_contained_secondary_text: "var(--btn_contained_secondary_text)",
-      btn_contained_error_bg: "var(--btn_contained_error_bg)",
-      btn_contained_error_text: "var(--btn_contained_error_text)",
-      btn_outlined_primary_border: "var(--btn_outlined_primary_border)",
-      btn_outlined_primary_text: "var(--btn_outlined_primary_text)",
-      btn_ghost_primary_text: "var(--btn_ghost_primary_text)",
-      btn_ghost_secondary_text: "var(--btn_ghost_secondary_text)",
-      btn_ghost_error_text: "var(--btn_ghost_error_text)",
+      btn_primary_bg: "var(--btn_primary_bg)",
+      btn_secondary_bg: "var(--btn_secondary_bg)",
+      btn_error_bg: "var(--btn_error_bg)",
+      btn_primary_border: "var(--btn_primary_border)",
+      btn_secondary_border: "var(--btn_secondary_border)",
+      btn_primary_text_1: "var(--btn_primary_text_1)",
+      btn_primary_text_2: "var(--btn_primary_text_2)",
+      btn_secondary_text: "var(--btn_secondary_text)",
+      btn_error_text: "var(--btn_error_text)",
       btn_selected_primary_bg: "var(--btn_selected_primary_bg)",
       btn_selected_primary_text: "var(--btn_selected_primary_text)",
       btn_selected_secondary_bg: "var(--btn_selected_secondary_bg)",

package/src/foundation/colors/token/component.ts

@@ -8,7 +8,7 @@ export interface TokenComponentColorValue {
 
 export const tokenComponentColor: TokenComponentColorValue = {
   btn: {
-    btn_contained_primary_bg: {
+    btn_primary_bg: {
       light1: "--lunit_teal_30",
       light2: "--lunit_teal_30",
       dark1: "--lunit_teal_40",
@@ -16,15 +16,7 @@ export const tokenComponentColor: TokenComponentColorValue = {
       dark3: "--lunit_teal_40",
       dark4: "--lunit_teal_40",
     },
-    btn_contained_primary_text: {
-      light1: "--grey_95",
-      light2: "--grey_95",
-      dark1: "--grey_95",
-      dark2: "--grey_95",
-      dark3: "--grey_95",
-      dark4: "--grey_95",
-    },
-    btn_contained_secondary_bg: {
+    btn_secondary_bg: {
       light1: "--grey_15",
       light2: "--grey_15",
       dark1: "--grey_60",
@@ -32,15 +24,7 @@ export const tokenComponentColor: TokenComponentColorValue = {
       dark3: "--grey_60",
       dark4: "--grey_60",
     },
-    btn_contained_secondary_text: {
-      light1: "--grey_95",
-      light2: "--grey_95",
-      dark1: "--grey_5",
-      dark2: "--grey_5",
-      dark3: "--grey_5",
-      dark4: "--grey_5",
-    },
-    btn_contained_error_bg: {
+    btn_error_bg: {
       light1: "--red_30",
       light2: "--red_30",
       dark1: "--red_40",
@@ -48,15 +32,7 @@ export const tokenComponentColor: TokenComponentColorValue = {
       dark3: "--red_40",
       dark4: "--red_40",
     },
-    btn_contained_error_text: {
-      light1: "--grey_95",
-      light2: "--grey_95",
-      dark1: "--grey_95",
-      dark2: "--grey_95",
-      dark3: "--grey_95",
-      dark4: "--grey_95",
-    },
-    btn_outlined_primary_border: {
+    btn_primary_border: {
       light1: "--lunit_teal_40",
       light2: "--lunit_teal_40",
       dark1: "--lunit_teal_40",
@@ -64,15 +40,15 @@ export const tokenComponentColor: TokenComponentColorValue = {
       dark3: "--lunit_teal_40",
       dark4: "--lunit_teal_40",
     },
-    btn_outlined_primary_text: {
-      light1: "--lunit_teal_50",
-      light2: "--lunit_teal_50",
-      dark1: "--lunit_teal_40",
-      dark2: "--lunit_teal_40",
-      dark3: "--lunit_teal_40",
-      dark4: "--lunit_teal_40",
+    btn_secondary_border: {
+      light1: "--grey_15",
+      light2: "--grey_15",
+      dark1: "--grey_5",
+      dark2: "--grey_5",
+      dark3: "--grey_5",
+      dark4: "--grey_5",
     },
-    btn_ghost_primary_text: {
+    btn_primary_text_1: {
       light1: "--lunit_teal_50",
       light2: "--lunit_teal_50",
       dark1: "--lunit_teal_40",
@@ -80,7 +56,15 @@ export const tokenComponentColor: TokenComponentColorValue = {
       dark3: "--lunit_teal_40",
       dark4: "--lunit_teal_40",
     },
-    btn_ghost_secondary_text: {
+    btn_primary_text_2: {
+      light1: "--grey_95",
+      light2: "--grey_95",
+      dark1: "--grey_95",
+      dark2: "--grey_95",
+      dark3: "--grey_95",
+      dark4: "--grey_95",
+    },
+    btn_secondary_text: {
       light1: "--grey_95",
       light2: "--grey_95",
       dark1: "--grey_5",
@@ -88,7 +72,7 @@ export const tokenComponentColor: TokenComponentColorValue = {
       dark3: "--grey_5",
       dark4: "--grey_5",
     },
-    btn_ghost_error_text: {
+    btn_error_text: {
       light1: "--red_40",
       light2: "--red_40",
       dark1: "--red_40",

package/src/foundation/colors/types.ts

@@ -29,17 +29,15 @@ export interface ColorToken {
     shadow_04: CSSPropertyColor;
   };
   component: {
-    btn_contained_primary_bg: CSSPropertyColor;
-    btn_contained_primary_text: CSSPropertyColor;
-    btn_contained_secondary_bg: CSSPropertyColor;
-    btn_contained_secondary_text: CSSPropertyColor;
-    btn_contained_error_bg: CSSPropertyColor;
-    btn_contained_error_text: CSSPropertyColor;
-    btn_outlined_primary_border: CSSPropertyColor;
-    btn_outlined_primary_text: CSSPropertyColor;
-    btn_ghost_primary_text: CSSPropertyColor;
-    btn_ghost_secondary_text: CSSPropertyColor;
-    btn_ghost_error_text: CSSPropertyColor;
+    btn_primary_bg: CSSPropertyColor;
+    btn_secondary_bg: CSSPropertyColor;
+    btn_error_bg: CSSPropertyColor;
+    btn_primary_border: CSSPropertyColor;
+    btn_secondary_border: CSSPropertyColor;
+    btn_primary_text_1: CSSPropertyColor;
+    btn_primary_text_2: CSSPropertyColor;
+    btn_secondary_text: CSSPropertyColor;
+    btn_error_text: CSSPropertyColor;
     btn_selected_primary_bg: CSSPropertyColor;
     btn_selected_primary_text: CSSPropertyColor;
     btn_selected_secondary_bg: CSSPropertyColor;

package/src/index.ts

@@ -4,6 +4,7 @@ export { base as baseColors } from "./foundation/colors";
 export { default as Alert } from "./components/Alert";
 export { default as Button } from "./components/Button";
 export { default as Chip } from "./components/Chip";
+export { default as Checkbox } from "./components/Checkbox";
 export { default as DataTable } from "./components/DataTable";
 export { default as DatePicker } from "./components/DatePicker";
 export { default as Dropdown } from "./components/Dropdown";
@@ -12,7 +13,9 @@ export { default as Modal } from "./components/Modal";
 export { default as Radio } from "./components/Radio";
 export { default as RadioGroup } from "./components/RadioGroup";
 export { default as TextField } from "./components/TextField";
+export { default as Toast } from "./components/Toast";
 export { default as Toggle } from "./components/Toggle";
 export { default as ToggleButton } from "./components/ToggleButton";
 export { default as ToggleButtonGroup } from "./components/ToggleButtonGroup";
 export { default as Tooltip } from "./components/Tooltip";
+export { default as Typography } from "./components/Typography";

package/src/stories/components/Button/Kind.stories.tsx

@@ -450,13 +450,16 @@ const OutlinedButtonTemplate: StoryFn<typeof Button> = ({
 }) => {
   return (
     <>
-      <Table sx={{ width: 250 }}>
+      <Table sx={{ width: 600 }}>
         <TableHead>
           <TableRow>
             <TableCell></TableCell>
             <TableCell sx={{ typography: "body2_14_medium", color: "inherit" }}>
               Outlined Primary
             </TableCell>
+            <TableCell sx={{ typography: "body2_14_medium", color: "inherit" }}>
+              Outlined Secondary
+            </TableCell>
           </TableRow>
         </TableHead>
         <TableBody>
@@ -468,7 +471,12 @@ const OutlinedButtonTemplate: StoryFn<typeof Button> = ({
             </TableCell>
             <TableCell>
               <Button {...restProps} kind="outlined">
-                Text
+                {restProps.children}
+              </Button>
+            </TableCell>
+            <TableCell>
+              <Button {...restProps} kind="outlined" color="secondary">
+                {restProps.children}
               </Button>
             </TableCell>
           </TableRow>
@@ -480,7 +488,17 @@ const OutlinedButtonTemplate: StoryFn<typeof Button> = ({
             </TableCell>
             <TableCell>
               <Button {...restProps} id="hover7" kind="outlined">
-                Text
+                {restProps.children}
+              </Button>
+            </TableCell>
+            <TableCell>
+              <Button
+                {...restProps}
+                id="hover7"
+                kind="outlined"
+                color="secondary"
+              >
+                {restProps.children}
               </Button>
             </TableCell>
           </TableRow>
@@ -496,7 +514,17 @@ const OutlinedButtonTemplate: StoryFn<typeof Button> = ({
                 kind="outlined"
                 className="Mui-focusVisible"
               >
-                Text
+                {restProps.children}
+              </Button>
+            </TableCell>
+            <TableCell>
+              <Button
+                {...restProps}
+                kind="outlined"
+                color="secondary"
+                className="Mui-focusVisible"
+              >
+                {restProps.children}
               </Button>
             </TableCell>
           </TableRow>
@@ -508,7 +536,12 @@ const OutlinedButtonTemplate: StoryFn<typeof Button> = ({
             </TableCell>
             <TableCell>
               <Button {...restProps} kind="outlined" disabled>
-                Text
+                {restProps.children}
+              </Button>
+            </TableCell>
+            <TableCell>
+              <Button {...restProps} kind="outlined" color="secondary" disabled>
+                {restProps.children}
               </Button>
             </TableCell>
           </TableRow>

package/src/stories/components/Toast/Toast.stories.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { StoryFn, Meta } from "@storybook/react";
 import { Box } from "@mui/material";
 
-import Toast from "@/components/Toast/Toast";
+import Toast from "@/components/Toast";
 import { action } from "@storybook/addon-actions";
 import Button from "@/components/Button";
 

package/src/stories/foundation/Typography/Typography.mdx

@@ -1,7 +1,7 @@
 import { Meta, Canvas, Story } from "@storybook/blocks";
 import * as TypographyStories from "./TypographyExamples.stories";
 
-import { Typography } from "@mui/material";
+import Typography from "@/components/Typography";
 
 import { variants } from "./const";
 

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

@@ -1,9 +1,11 @@
 import React from "react";
 
 import { StoryFn } from "@storybook/react";
-import { Box, Typography } from "@mui/material";
+import { Box } from "@mui/material";
 import { styled } from "@mui/material/styles";
 
+import Typography from "@/components/Typography";
+
 import { variantArray } from "./const";
 
 export default {

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

@@ -1,8 +1,8 @@
 import React from "react";
-import { Typography } from "@mui/material";
 
-import { variants } from "./const";
+import Typography from "@/components/Typography";
 
+import { variants } from "./const";
 import TypographyGroup from "./TypographyGroup";
 
 const AllVariants = () => (

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

@@ -1,12 +1,8 @@
 import React from "react";
 
-import {
-  Box,
-  Typography,
-  styled,
-  useTheme,
-  TypographyProps,
-} from "@mui/material";
+import { Box, styled, useTheme, TypographyProps } from "@mui/material";
+
+import Typography from "@/components/Typography";
 
 export const TypographyContent = styled(Box)({
   display: "flex",

package/dist/components/Alert/Alert.utils..js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Alert.utils..js","sourceRoot":"","sources":["../../../src/components/Alert/Alert.utils..ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,SAAS,CAAC;AAG5B,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,QAAgC,EAAE,EAAE;IACrE,QAAQ,QAAQ,EAAE;QAChB,KAAK,MAAM;YACT,OAAO,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,SAAS,CAAC,aAAa,CAAC;QACrD,KAAK,SAAS;YACZ,OAAO,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC;QACxD,KAAK,OAAO;YACV,OAAO,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC;QACtD;YACE,OAAO,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC;KACzD;AACH,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,QAAgC,EAAE,EAAE;IACjE,QAAQ,QAAQ,EAAE;QAChB,KAAK,MAAM;YACT,OAAO,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC;QACzD,KAAK,SAAS;YACZ,OAAO,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,SAAS,CAAC,oBAAoB,CAAC;QAC5D,KAAK,OAAO;YACV,OAAO,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,SAAS,CAAC,kBAAkB,CAAC;QAC1D;YACE,OAAO,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,SAAS,CAAC,oBAAoB,CAAC;KAC7D;AACH,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,QAAgC,EAAE,EAAE;IAC/D,QAAQ,QAAQ,EAAE;QAChB,KAAK,MAAM;YACT,OAAO,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC;QAC/C,KAAK,SAAS;YACZ,OAAO,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;QAClD,KAAK,OAAO;YACV,OAAO,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC;QAChD;YACE,OAAO,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;KACnD;AACH,CAAC,CAAC"}

package/dist/types/components/Alert/Alert.utils..d.ts

@@ -1,4 +0,0 @@
-import { AlertColor } from "@mui/material";
-export declare const getBackgroundColor: (severity: AlertColor | undefined) => import("csstype").Property.Color | undefined;
-export declare const getBorderColor: (severity: AlertColor | undefined) => import("csstype").Property.Color | undefined;
-export declare const getIconColor: (severity: AlertColor | undefined) => import("csstype").Property.Color | undefined;