@lunit/design-system 2.1.0 → 2.2.3

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

@@ -1,4 +1,4 @@
-import { ColorTokenValueBySurface } from "./types";
+import { ColorTokenValueBySurface } from './types';
 
 export interface TokenCoreColorValue {
   [token: string]: ColorTokenValueBySurface;
@@ -6,193 +6,172 @@ export interface TokenCoreColorValue {
 
 export const tokenCoreColor: TokenCoreColorValue = {
   bg_01: {
-    light1: "--grey_0",
-    light2: "--grey_10",
-    dark1: "--grey_90",
-    dark2: "--grey_75",
+    light1: '--grey_0',
+    light2: '--grey_10',
+    dark1: '--grey_90',
+    dark2: '--grey_75',
   },
   bg_02: {
-    light1: "--grey_0",
-    light2: "--grey_0",
-    dark1: "--grey_70",
-    dark2: "--grey_70",
+    light1: '--grey_0',
+    light2: '--grey_0',
+    dark1: '--grey_70',
+    dark2: '--grey_70',
   },
   bg_03: {
-    light1: "--grey_0",
-    light2: "--grey_0",
-    dark1: "--grey_85",
-    dark2: "--grey_85",
+    light1: '--grey_0',
+    light2: '--grey_0',
+    dark1: '--grey_85',
+    dark2: '--grey_85',
   },
   layer_01: {
-    light1: "--grey_5",
-    light2: "--grey_5",
-    dark1: "--grey_80",
-    dark2: "--grey_80",
+    light1: '--grey_5',
+    light2: '--grey_5',
+    dark1: '--grey_80',
+    dark2: '--grey_80',
   },
   text_primary: {
-    light1: "--lunit_teal_50",
-    light2: "--lunit_teal_50",
-    dark1: "--lunit_teal_40",
-    dark2: "--lunit_teal_40",
+    light1: '--lunit_teal_50',
+    light2: '--lunit_teal_50',
+    dark1: '--lunit_teal_40',
+    dark2: '--lunit_teal_40',
   },
   text_normal: {
-    light1: "--grey_95",
-    light2: "--grey_95",
-    dark1: "--grey_5",
-    dark2: "--grey_5",
+    light1: '--grey_95',
+    light2: '--grey_95',
+    dark1: '--grey_5',
+    dark2: '--grey_5',
   },
   text_medium: {
-    light1: "--grey_60",
-    light2: "--grey_60",
-    dark1: "--grey_30",
-    dark2: "--grey_30",
+    light1: '--grey_60',
+    light2: '--grey_60',
+    dark1: '--grey_30',
+    dark2: '--grey_30',
   },
   text_light: {
-    light1: "--grey_40",
-    light2: "--grey_40",
-    dark1: "--grey_50",
-    dark2: "--grey_50",
+    light1: '--grey_40',
+    light2: '--grey_40',
+    dark1: '--grey_50',
+    dark2: '--grey_50',
   },
   text_error: {
-    light1: "--red_40",
-    light2: "--red_40",
-    dark1: "--red_40",
-    dark2: "--red_30",
+    light1: '--red_40',
+    light2: '--red_40',
+    dark1: '--red_40',
+    dark2: '--red_30',
   },
   text_success: {
-    light1: "--green_40",
-    light2: "--green_40",
-    dark1: "--green_40",
-    dark2: "--green_30",
+    light1: '--green_40',
+    light2: '--green_40',
+    dark1: '--green_40',
+    dark2: '--green_30',
   },
   text_warning: {
-    light1: "--orange_40",
-    light2: "--orange_40",
-    dark1: "--orange_40",
-    dark2: "--orange_30",
+    light1: '--orange_40',
+    light2: '--orange_40',
+    dark1: '--orange_40',
+    dark2: '--orange_30',
   },
   text_info: {
-    light1: "--blue_40",
-    light2: "--blue_40",
-    dark1: "--blue_40",
-    dark2: "--blue_30",
+    light1: '--blue_40',
+    light2: '--blue_40',
+    dark1: '--blue_40',
+    dark2: '--blue_30',
   },
   link_primary: {
-    light1: "--blue_40",
-    light2: "--blue_40",
-    dark1: "--blue_30",
-    dark2: "--blue_30",
+    light1: '--blue_40',
+    light2: '--blue_40',
+    dark1: '--blue_30',
+    dark2: '--blue_30',
   },
   link_hover: {
-    light1: "--blue_50",
-    light2: "--blue_50",
-    dark1: "--blue_40",
-    dark2: "--blue_40",
+    light1: '--blue_50',
+    light2: '--blue_50',
+    dark1: '--blue_40',
+    dark2: '--blue_40',
   },
   link_visited: {
-    light1: "--purple_50",
-    light2: "--purple_50",
-    dark1: "--purple_40",
-    dark2: "--purple_40",
+    light1: '--purple_50',
+    light2: '--purple_50',
+    dark1: '--purple_40',
+    dark2: '--purple_40',
   },
   icon_error_02: {
-    light1: "--red_40",
-    light2: "--red_40",
-    dark1: "--red_30",
-    dark2: "--red_30",
+    light1: '--red_40',
+    light2: '--red_40',
+    dark1: '--red_30',
+    dark2: '--red_30',
   },
   icon_success_02: {
-    light1: "--green_40",
-    light2: "--green_40",
-    dark1: "--green_30",
-    dark2: "--green_30",
+    light1: '--green_40',
+    light2: '--green_40',
+    dark1: '--green_30',
+    dark2: '--green_30',
   },
   icon_warning_02: {
-    light1: "--orange_40",
-    light2: "--orange_40",
-    dark1: "--orange_30",
-    dark2: "--orange_30",
+    light1: '--orange_40',
+    light2: '--orange_40',
+    dark1: '--orange_30',
+    dark2: '--orange_30',
   },
   icon_info_02: {
-    light1: "--blue_40",
-    light2: "--blue_40",
-    dark1: "--blue_30",
-    dark2: "--blue_30",
-  },
-  hover: {
-    // Deprecated. Please use core.status_hover instead.
-    light1: "rgba(0, 0, 0, 0.12)", // "--grey_100 12%",
-    light2: "rgba(0, 0, 0, 0.12)", // "--grey_100 12%",
-    dark1: "rgba(255, 255, 255, 0.12)", // "--grey_0 12%",
-    dark2: "rgba(255, 255, 255, 0.12)", // "--grey_0 12%",
+    light1: '--blue_40',
+    light2: '--blue_40',
+    dark1: '--blue_30',
+    dark2: '--blue_30',
   },
   status_hover: {
     // TODO: 알파값 적용 코드는 일단 하드코딩. 나중에 수정할것
-    light1: "rgba(0, 0, 0, 0.12)", // "--grey_100 12%",
-    light2: "rgba(0, 0, 0, 0.12)", // "--grey_100 12%",
-    dark1: "rgba(255, 255, 255, 0.12)", // "--grey_0 12%",
-    dark2: "rgba(255, 255, 255, 0.12)", // "--grey_0 12%",
-  },
-  focused: {
-    // Deprecated. Please use core.status_focused instead.
-    light1: "--lunit_teal_40",
-    light2: "--lunit_teal_40",
-    dark1: "--lunit_teal_40",
-    dark2: "--lunit_teal_40",
+    light1: 'rgba(0, 0, 0, 0.12)', // "--grey_100 12%",
+    light2: 'rgba(0, 0, 0, 0.12)', // "--grey_100 12%",
+    dark1: 'rgba(255, 255, 255, 0.12)', // "--grey_0 12%",
+    dark2: 'rgba(255, 255, 255, 0.12)', // "--grey_0 12%",
   },
   status_focused: {
-    light1: "--lunit_teal_40",
-    light2: "--lunit_teal_40",
-    dark1: "--lunit_teal_40",
-    dark2: "--lunit_teal_40",
-  },
-  selected: {
-    // Deprecated. Please use core.status_selected instead.
-    light1: "--lunit_teal_10",
-    light2: "--lunit_teal_10",
-    dark1: "--lunit_teal_80",
-    dark2: "--lunit_teal_80",
+    light1: '--lunit_teal_40',
+    light2: '--lunit_teal_40',
+    dark1: '--lunit_teal_40',
+    dark2: '--lunit_teal_40',
   },
   status_selected: {
-    light1: "--lunit_teal_10",
-    light2: "--lunit_teal_10",
-    dark1: "--lunit_teal_80",
-    dark2: "--lunit_teal_80",
+    light1: '--lunit_teal_10',
+    light2: '--lunit_teal_10',
+    dark1: '--lunit_teal_80',
+    dark2: '--lunit_teal_80',
   },
   shadow_01: {
-    light1: "rgba(0, 0, 0, 0.12)", // "--grey_100 12%",
-    light2: "rgba(0, 0, 0, 0.12)", // "--grey_100 12%",
-    dark1: "rgba(0, 0, 0, 0.32)", // "--grey_100 32%",
-    dark2: "rgba(0, 0, 0, 0.32)", // "--grey_100 32%",
+    light1: 'rgba(0, 0, 0, 0.12)', // "--grey_100 12%",
+    light2: 'rgba(0, 0, 0, 0.12)', // "--grey_100 12%",
+    dark1: 'rgba(0, 0, 0, 0.32)', // "--grey_100 32%",
+    dark2: 'rgba(0, 0, 0, 0.32)', // "--grey_100 32%",
   },
   shadow_02: {
-    light1: "rgba(0, 0, 0, 0.18)", // "--grey_100 18%",
-    light2: "rgba(0, 0, 0, 0.18)", // "--grey_100 18%",
-    dark1: "rgba(0, 0, 0, 0.4)", // "--grey_100 40%",
-    dark2: "rgba(0, 0, 0, 0.4)", // "--grey_100 40%",
+    light1: 'rgba(0, 0, 0, 0.18)', // "--grey_100 18%",
+    light2: 'rgba(0, 0, 0, 0.18)', // "--grey_100 18%",
+    dark1: 'rgba(0, 0, 0, 0.4)', // "--grey_100 40%",
+    dark2: 'rgba(0, 0, 0, 0.4)', // "--grey_100 40%",
   },
   shadow_03: {
-    light1: "rgba(0, 0, 0, 0.12)", // "--grey_100 12%",
-    light2: "rgba(0, 0, 0, 0.12)", // "--grey_100 12%",
-    dark1: "rgba(0, 0, 0, 0.36)", // "--grey_100 36%",
-    dark2: "rgba(0, 0, 0, 0.36)", // "--grey_100 36%",
+    light1: 'rgba(0, 0, 0, 0.12)', // "--grey_100 12%",
+    light2: 'rgba(0, 0, 0, 0.12)', // "--grey_100 12%",
+    dark1: 'rgba(0, 0, 0, 0.36)', // "--grey_100 36%",
+    dark2: 'rgba(0, 0, 0, 0.36)', // "--grey_100 36%",
   },
   shadow_04: {
-    light1: "rgba(0, 0, 0, 0.18)", // "--grey_100 18%",
-    light2: "rgba(0, 0, 0, 0.18)", // "--grey_100 18%",
-    dark1: "rgba(0, 0, 0, 0.48)", // "--grey_100 48%",
-    dark2: "rgba(0, 0, 0, 0.48)", // "--grey_100 48%",
+    light1: 'rgba(0, 0, 0, 0.18)', // "--grey_100 18%",
+    light2: 'rgba(0, 0, 0, 0.18)', // "--grey_100 18%",
+    dark1: 'rgba(0, 0, 0, 0.48)', // "--grey_100 48%",
+    dark2: 'rgba(0, 0, 0, 0.48)', // "--grey_100 48%",
   },
   border_light: {
-    light1: "rgba(0, 0, 0, 0.12)", // "--grey_100 12%",
-    light2: "rgba(0, 0, 0, 0.12)", // "--grey_100 12%",
-    dark1: "rgba(255, 255, 255, 0.12)", // "--grey_0 12%",
-    dark2: "rgba(255, 255, 255, 0.12)", // "--grey_0 12%",
+    light1: 'rgba(0, 0, 0, 0.12)', // "--grey_100 12%",
+    light2: 'rgba(0, 0, 0, 0.12)', // "--grey_100 12%",
+    dark1: 'rgba(255, 255, 255, 0.12)', // "--grey_0 12%",
+    dark2: 'rgba(255, 255, 255, 0.12)', // "--grey_0 12%",
   },
   border_medium: {
-    light1: "rgba(0, 0, 0, 0.24)", // "--grey_100 24%",
-    light2: "rgba(0, 0, 0, 0.24)", // "--grey_100 24%",
-    dark1: "rgba(255, 255, 255, 0.24)", // "--grey_0 24%",
-    dark2: "rgba(255, 255, 255, 0.24)", // "--grey_0 24%",
+    light1: 'rgba(0, 0, 0, 0.24)', // "--grey_100 24%",
+    light2: 'rgba(0, 0, 0, 0.24)', // "--grey_100 24%",
+    dark1: 'rgba(255, 255, 255, 0.24)', // "--grey_0 24%",
+    dark2: 'rgba(255, 255, 255, 0.24)', // "--grey_0 24%",
   },
 };

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

@@ -1,2 +1,2 @@
-export * from "./component";
-export * from "./core";
+export * from './component';
+export * from './core';

package/src/foundation/colors/types.ts

@@ -19,11 +19,8 @@ export interface ColorToken {
     icon_success_02: string;
     icon_warning_02: string;
     icon_info_02: string;
-    hover: string;
     status_hover: string;
-    focused: string;
     status_focused: string;
-    selected: string;
     status_selected: string;
     shadow_01: string;
     shadow_02: string;
@@ -37,14 +34,12 @@ export interface ColorToken {
     btn_secondary_bg: string;
     btn_error_bg: string;
     btn_primary_border: string;
-    btn_secondary_border: string;
     btn_primary_text_1: string;
     btn_primary_text_2: string;
     btn_secondary_text: string;
     btn_error_text: string;
     btn_selected_primary_bg: string;
     btn_selected_primary_text: string;
-    btn_selected_secondary_bg: string;
     btn_selected_secondary_text: string;
     btn_selected_tertiary_bg: string;
     btn_selected_tertiary_text: string;
@@ -55,8 +50,6 @@ export interface ColorToken {
     textfield_bg: string;
     textfield_border_error: string;
     dropdown_divider_border: string;
-    datatable_border_01: string;
-    datatable_border_02: string;
     datatable_zebra: string;
     scrollbars_bg: string;
     scrollbars_hover: string;

package/src/foundation/index.ts

@@ -1,16 +1,16 @@
-import { Components, Theme } from "@mui/material";
-import { deepmerge } from "@mui/utils";
-import paletteOptions, { createColorCssBaseline } from "./colors";
+import { Components, Theme } from '@mui/material';
+import { deepmerge } from '@mui/utils';
+import paletteOptions, { createColorCssBaseline } from './colors';
 import typographyOptions, {
   createTypographyCssBaseline,
   typographyDefaultProps,
-} from "./Typography";
-import { createElevationCssBaseline, elevationOptions } from "./Elevation";
+} from './Typography';
+import { createElevationCssBaseline, elevationOptions } from './Elevation';
 
-export const foundationCssBaseline: Components<Theme>["MuiCssBaseline"] = {
+export const foundationCssBaseline: Components<Theme>['MuiCssBaseline'] = {
   styleOverrides: deepmerge(
     deepmerge(createColorCssBaseline(), createTypographyCssBaseline()),
-    createElevationCssBaseline()
+    createElevationCssBaseline(),
   ),
 };
 
@@ -22,4 +22,4 @@ export const palette = paletteOptions;
 
 export const elevation = elevationOptions;
 
-export { spacing } from "./spacing";
+export { spacing } from './spacing';

package/src/foundation/spacing.ts

@@ -1,3 +1,3 @@
-import { SpacingOptions } from "@mui/system";
+import { SpacingOptions } from '@mui/system';
 
 export const spacing: SpacingOptions = 4;

package/src/index.ts

@@ -1,26 +1,26 @@
-export { default as theme, themeOptions } from "./theme";
-export { base as baseColors } from "./foundation/colors";
+export { default as theme, themeOptions } from './theme';
+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 Dialog } from "./components/Dialog";
-export { default as DataTable } from "./components/DataTable";
-export { default as DatePicker } from "./components/DatePicker";
+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 Dialog } from './components/Dialog';
+export { default as DataTable } from './components/DataTable';
+export { default as DatePicker } from './components/DatePicker';
 export {
   default as Dropdown,
   DropdownItem,
   DropdownDivider,
   DropdownSubtitle,
-} from "./components/Dropdown";
-export { default as FormLabel } from "./components/FormLabel";
-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";
+} from './components/Dropdown';
+export { default as FormLabel } from './components/FormLabel';
+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/GettingStarted.mdx

@@ -1,4 +1,4 @@
-import {  Meta } from '@storybook/blocks';
+import { Meta } from '@storybook/addon-docs/blocks';
 
 <Meta title="Getting Started/Overview" />
 
@@ -17,9 +17,9 @@ Material UI is peer dependency of Lunit Design System Library. You need to insta
 ```json
 "peerDependencies": {
   "@mui/material": "^5.0.0",
-  "@types/react": "^17.0.0 || ^18.0.0",
-  "react": "^17.0.0 || ^18.0.0",
-  "react-dom": "^17.0.0 || ^18.0.0"
+  "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+  "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+  "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
 }
 ```
 
@@ -30,10 +30,7 @@ Material UI is peer dependency of Lunit Design System Library. You need to insta
 This library is based on Material UI's themes feature, so it imports themes and puts them into the provider. We also recommend using the `CssBaseline` component.
 
 ```tsx
-import {
-  createTheme,
-  ThemeProvider,
-} from '@mui/material/styles';
+import { createTheme, ThemeProvider } from '@mui/material/styles';
 import CssBaseline from '@mui/material/CssBaseline';
 import { themeOptions } from '@lunit/design-system';
 
@@ -61,12 +58,9 @@ This library uses the `Pretendard` font-family by default. The [Pretendard font]
 const theme = createTheme(
   deepmerge(themeOptions, {
     typography: {
-      fontFamily: [
-        'Pretendard Variable',
-        'sans-serif',
-      ]
-    }
-  })
+      fontFamily: ['Pretendard Variable', 'sans-serif'],
+    },
+  }),
 );
 ```
 
@@ -85,4 +79,4 @@ This library provides a variety of components that are used in Lunit's products.
 ## Support
 
 - Github: [Create a new issue](https://github.com/lunit-io/design-system/issues/new)
-- Slack: #tf_design_system
+- Slack: #tf_design_system