@lunit/design-system 2.1.0 → 2.2.3

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

@@ -1,17 +1,17 @@
-import { grey } from "./grey";
+import { grey } from './grey';
 
 export const purple = {
-  5: "#F6F2FF",
-  10: "#ECE1FF",
-  15: "#E1CEFF",
-  20: "#D4BBFF",
-  30: "#BE95FF",
-  40: "#9E6BF0",
-  50: "#7E41DA",
-  60: "#6B2FC1",
-  70: "#5D22B1",
-  80: "#441C7E",
-  90: "#1D0345",
+  5: '#F6F2FF',
+  10: '#ECE1FF',
+  15: '#E1CEFF',
+  20: '#D4BBFF',
+  30: '#BE95FF',
+  40: '#9E6BF0',
+  50: '#7E41DA',
+  60: '#6B2FC1',
+  70: '#5D22B1',
+  80: '#441C7E',
+  90: '#1D0345',
 };
 
 export const purpleText = {

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

@@ -1,17 +1,17 @@
-import { grey } from "./grey";
+import { grey } from './grey';
 
 export const red = {
-  5: "#FFF1F1",
-  10: "#FFE3E4",
-  15: "#FFC9CC",
-  20: "#FFA1A7",
-  30: "#FF7077",
-  40: "#FA464F",
-  50: "#DA1E28",
-  60: "#A2191F",
-  70: "#750E13",
-  80: "#520408",
-  90: "#2E0905",
+  5: '#FFF1F1',
+  10: '#FFE3E4',
+  15: '#FFC9CC',
+  20: '#FFA1A7',
+  30: '#FF7077',
+  40: '#FA464F',
+  50: '#DA1E28',
+  60: '#A2191F',
+  70: '#750E13',
+  80: '#520408',
+  90: '#2E0905',
 };
 
 export const redText = {

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

@@ -1,17 +1,17 @@
-import { grey } from "./grey";
+import { grey } from './grey';
 
 export const yellow = {
-  5: "#FFFEE9",
-  10: "#FFFDC6",
-  15: "#FFFC9C",
-  20: "#FFF870",
-  30: "#FEF71C",
-  40: "#FFE81B",
-  50: "#EACC37",
-  60: "#BBA11F",
-  70: "#736A03",
-  80: "#4C4800",
-  90: "#3C3900",
+  5: '#FFFEE9',
+  10: '#FFFDC6',
+  15: '#FFFC9C',
+  20: '#FFF870',
+  30: '#FEF71C',
+  40: '#FFE81B',
+  50: '#EACC37',
+  60: '#BBA11F',
+  70: '#736A03',
+  80: '#4C4800',
+  90: '#3C3900',
 };
 
 export const yellowText = {

package/src/foundation/colors/index.ts

@@ -1,15 +1,14 @@
 // Main module for Foundation > Colors
 
-import { PaletteOptions, PaletteColor } from "@mui/material/styles";
-import * as base from "./base";
-import * as token from "./token";
-import { ColorToken } from "./types";
-import { ColorTokenValueBySurface } from "./token/types";
-
+import { PaletteOptions, PaletteColor } from '@mui/material/styles';
+import * as base from './base';
+import * as token from './token';
+import { ColorToken } from './types';
+import { ColorTokenValueBySurface } from './token/types';
 export type BaseColor = Record<keyof typeof base.blue, PaletteColor>;
 export type GreyColor = Record<keyof typeof base.grey, PaletteColor>;
 
-declare module "@mui/material/styles/createPalette" {
+declare module '@mui/material/styles' {
   interface PaletteOptions {
     lunit_global?: {
       grey: GreyColor;
@@ -47,28 +46,32 @@ type ColorKey = keyof typeof base;
 
 const createCSSVariables = () => {
   const cssVars: { [name: string]: string } = {};
-  for (let color in base) {
-    const baseColors = base[color as ColorKey];
-    for (let key in baseColors) {
-      if (baseColors.hasOwnProperty(key)) {
-        const varName = `--${color}_${key}`;
-        cssVars[varName] = baseColors[Number(key) as keyof typeof baseColors];
+
+  for (const color in base) {
+    if (Object.prototype.hasOwnProperty.call(base, color)) {
+      const baseColors = base[color as ColorKey];
+      for (const key in baseColors) {
+        if (Object.prototype.hasOwnProperty.call(baseColors, key)) {
+          const varName = `--${color}_${key}`;
+          cssVars[varName] = baseColors[Number(key) as keyof typeof baseColors];
+        }
       }
     }
   }
+
   return cssVars;
 };
 
 const createTokenColorVariables = (surface: keyof ColorTokenValueBySurface) => {
   const cssVars: { [name: string]: string } = {};
 
-  for (let coreToken in token.tokenCoreColor) {
-    if (token.tokenCoreColor.hasOwnProperty(coreToken)) {
+  for (const coreToken in token.tokenCoreColor) {
+    if (Object.prototype.hasOwnProperty.call(token.tokenCoreColor, coreToken)) {
       const varName = `--${coreToken}`;
       const tokenValue = token.tokenCoreColor[coreToken][surface];
       // 현재 tokenValue는 cssVariable과 rgba 값 2종류가 존재함. 이 종류에 따라서 var 사용 여부를 결정해주기 위해 if문을 추가하였으나,
       // 차후 피그마에서 json 파일을 넘겨준 것을 스크립트화하는 작업이 끝나면 if문 자체가 사라질 예정.
-      if (tokenValue.charAt(0) === "-") {
+      if (tokenValue.charAt(0) === '-') {
         cssVars[varName] = `var(${tokenValue})`;
       } else {
         cssVars[varName] = `${tokenValue}`;
@@ -76,16 +79,16 @@ const createTokenColorVariables = (surface: keyof ColorTokenValueBySurface) => {
     }
   }
 
-  for (let componentGroup in token.tokenComponentColor) {
-    if (token.tokenComponentColor.hasOwnProperty(componentGroup)) {
+  for (const componentGroup in token.tokenComponentColor) {
+    if (Object.prototype.hasOwnProperty.call(token.tokenComponentColor, componentGroup)) {
       const componentTokens = token.tokenComponentColor[componentGroup];
 
       let tokenName: keyof typeof componentTokens;
       for (tokenName in componentTokens) {
-        if (componentTokens.hasOwnProperty(tokenName)) {
+        if (Object.prototype.hasOwnProperty.call(componentTokens, tokenName)) {
           const varName = `--${tokenName}`;
           const tokenValue = componentTokens[tokenName][surface];
-          if (tokenValue.charAt(0) === "-") {
+          if (tokenValue.charAt(0) === '-') {
             cssVars[varName] = `var(${tokenValue})`;
           } else {
             cssVars[varName] = `${tokenValue}`;
@@ -94,45 +97,46 @@ const createTokenColorVariables = (surface: keyof ColorTokenValueBySurface) => {
       }
     }
   }
+
   return cssVars;
 };
 
 export const createColorCssBaseline = () => {
   return {
-    ":root": {
+    ':root': {
       ...createCSSVariables(),
-      ...createTokenColorVariables("dark1"),
+      ...createTokenColorVariables('dark1'),
     },
-    ".light1": {
-      ...createTokenColorVariables("light1"),
+    '.light1': {
+      ...createTokenColorVariables('light1'),
     },
-    ".light2": {
-      ...createTokenColorVariables("light2"),
+    '.light2': {
+      ...createTokenColorVariables('light2'),
     },
-    ".dark1": {
-      ...createTokenColorVariables("dark1"),
+    '.dark1': {
+      ...createTokenColorVariables('dark1'),
     },
-    ".dark2": {
-      ...createTokenColorVariables("dark2"),
+    '.dark2': {
+      ...createTokenColorVariables('dark2'),
     },
   };
 };
 
 // TODO: TextColors 삭제하고 관련된 설정 수정하기
 // TODO: opacity 글로벌 팔레트에 추가 여부 확인해서 작업하기
-const lunitColors: PaletteOptions["lunit_global"] =
-  ((): PaletteOptions["lunit_global"] => {
-    const ret: any = {};
-    for (const colorKey in base) {
+const lunitColors: PaletteOptions['lunit_global'] = ((): PaletteOptions['lunit_global'] => {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const ret: any = {};
+  for (const colorKey in base) {
+    if (Object.prototype.hasOwnProperty.call(base, colorKey)) {
       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)) {
+          if (Object.prototype.hasOwnProperty.call(baseColors, key)) {
             const color = baseColors[Number(key) as keyof typeof baseColors];
-            const textColor =
-              textColors[Number(key) as keyof typeof textColors];
+            const textColor = textColors[Number(key) as keyof typeof textColors];
             ret[colorKey][Number(key)] = {
               light: color,
               main: color,
@@ -143,8 +147,10 @@ const lunitColors: PaletteOptions["lunit_global"] =
         }
       }
     }
-    return ret;
-  })();
+  }
+
+  return ret;
+})();
 
 const paletteOptions = {
   primary: {
@@ -173,89 +179,82 @@ const paletteOptions = {
   lunit_global: lunitColors,
   lunit_token: {
     core: {
-      bg_01: "var(--bg_01)",
-      bg_02: "var(--bg_02)",
-      bg_03: "var(--bg_03)",
-      layer_01: "var(--layer_01)",
-      text_primary: "var(--text_primary)",
-      text_normal: "var(--text_normal)",
-      text_medium: "var(--text_medium)",
-      text_light: "var(--text_light)",
-      text_error: "var(--text_error)",
-      text_success: "var(--text_success)",
-      text_warning: "var(--text_warning)",
-      text_info: "var(--text_info)",
-      link_primary: "var(--link_primary)",
-      link_hover: "var(--link_hover)",
-      link_visited: "var(--link_visited)",
-      icon_error_02: "var(--icon_error_02)",
-      icon_success_02: "var(--icon_success_02)",
-      icon_warning_02: "var(--icon_warning_02)",
-      icon_info_02: "var(--icon_info_02)",
-      hover: "var(--hover)",
-      status_hover: "var(--status_hover)",
-      focused: "var(--focused)",
-      status_focused: "var(--status_focused)",
-      selected: "var(--selected)",
-      status_selected: "var(--status_selected)",
-      shadow_01: "var(--shadow_01)",
-      shadow_02: "var(--shadow_02)",
-      shadow_03: "var(--shadow_03)",
-      shadow_04: "var(--shadow_04)",
-      border_light: "var(--border_light)",
-      border_medium: "var(--border_medium)",
+      bg_01: 'var(--bg_01)',
+      bg_02: 'var(--bg_02)',
+      bg_03: 'var(--bg_03)',
+      layer_01: 'var(--layer_01)',
+      text_primary: 'var(--text_primary)',
+      text_normal: 'var(--text_normal)',
+      text_medium: 'var(--text_medium)',
+      text_light: 'var(--text_light)',
+      text_error: 'var(--text_error)',
+      text_success: 'var(--text_success)',
+      text_warning: 'var(--text_warning)',
+      text_info: 'var(--text_info)',
+      link_primary: 'var(--link_primary)',
+      link_hover: 'var(--link_hover)',
+      link_visited: 'var(--link_visited)',
+      icon_error_02: 'var(--icon_error_02)',
+      icon_success_02: 'var(--icon_success_02)',
+      icon_warning_02: 'var(--icon_warning_02)',
+      icon_info_02: 'var(--icon_info_02)',
+      status_hover: 'var(--status_hover)',
+      status_focused: 'var(--status_focused)',
+      status_selected: 'var(--status_selected)',
+      shadow_01: 'var(--shadow_01)',
+      shadow_02: 'var(--shadow_02)',
+      shadow_03: 'var(--shadow_03)',
+      shadow_04: 'var(--shadow_04)',
+      border_light: 'var(--border_light)',
+      border_medium: 'var(--border_medium)',
     },
     component: {
-      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)",
-      btn_selected_secondary_text: "var(--btn_selected_secondary_text)",
-      btn_selected_tertiary_bg: "var(--btn_selected_tertiary_bg)",
-      btn_selected_tertiary_text: "var(--btn_selected_tertiary_text)",
-      selectcontrol_on: "var(--selectcontrol_on)",
-      selectcontrol_off: "var(--selectcontrol_off)",
-      selectcontrol_handler: "var(--selectcontrol_handler)",
-      selectcontrol_handler_shadow: "var(--selectcontrol_handler_shadow)",
-      textfield_bg: "var(--textfield_bg)",
-      textfield_border_error: "var(--textfield_border_error)",
-      dropdown_divider_border: "var(--dropdown_divider_border)",
-      datatable_border_01: "var(--datatable_border_01)",
-      datatable_border_02: "var(--datatable_border_02)",
-      datatable_zebra: "var(--datatable_zebra)",
-      scrollbars_bg: "var(--scrollbars_bg)",
-      scrollbars_hover: "var(--scrollbars_hover)",
-      scrollbars_pressed: "var(--scrollbars_pressed)",
-      modal_overlay: "var(--modal_overlay)",
-      tooltip_bg: "var(--tooltip_bg)",
-      tooltip_text_normal: "var(--tooltip_text_normal)",
-      tooltip_text_medium: "var(--tooltip_text_medium)",
-      alert_error_bg: "var(--alert_error_bg)",
-      alert_error_border: "var(--alert_error_border)",
-      alert_success_bg: "var(--alert_success_bg)",
-      alert_success_border: "var(--alert_success_border)",
-      alert_info_bg: "var(--alert_info_bg)",
-      alert_info_border: "var(--alert_info_border)",
-      alert_warning_bg: "var(--alert_warning_bg)",
-      alert_warning_border: "var(--alert_warning_border)",
-      chip_primary_bg: "var(--chip_primary_bg)",
-      chip_primary_text: "var(--chip_primary_text)",
-      chip_secondary_bg: "var(--chip_secondary_bg)",
-      chip_secondary_text: "var(--chip_secondary_text)",
-      chip_error_bg: "var(--chip_error_bg)",
-      chip_error_text: "var(--chip_error_text)",
-      chip_warning_bg: "var(--chip_warning_bg)",
-      chip_warning_text: "var(--chip_warning_text)",
-      chip_success_bg: "var(--chip_success_bg)",
-      chip_success_text: "var(--chip_success_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_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_text: 'var(--btn_selected_secondary_text)',
+      btn_selected_tertiary_bg: 'var(--btn_selected_tertiary_bg)',
+      btn_selected_tertiary_text: 'var(--btn_selected_tertiary_text)',
+      selectcontrol_on: 'var(--selectcontrol_on)',
+      selectcontrol_off: 'var(--selectcontrol_off)',
+      selectcontrol_handler: 'var(--selectcontrol_handler)',
+      selectcontrol_handler_shadow: 'var(--selectcontrol_handler_shadow)',
+      textfield_bg: 'var(--textfield_bg)',
+      textfield_border_error: 'var(--textfield_border_error)',
+      dropdown_divider_border: 'var(--dropdown_divider_border)',
+      datatable_zebra: 'var(--datatable_zebra)',
+      scrollbars_bg: 'var(--scrollbars_bg)',
+      scrollbars_hover: 'var(--scrollbars_hover)',
+      scrollbars_pressed: 'var(--scrollbars_pressed)',
+      modal_overlay: 'var(--modal_overlay)',
+      tooltip_bg: 'var(--tooltip_bg)',
+      tooltip_text_normal: 'var(--tooltip_text_normal)',
+      tooltip_text_medium: 'var(--tooltip_text_medium)',
+      alert_error_bg: 'var(--alert_error_bg)',
+      alert_error_border: 'var(--alert_error_border)',
+      alert_success_bg: 'var(--alert_success_bg)',
+      alert_success_border: 'var(--alert_success_border)',
+      alert_info_bg: 'var(--alert_info_bg)',
+      alert_info_border: 'var(--alert_info_border)',
+      alert_warning_bg: 'var(--alert_warning_bg)',
+      alert_warning_border: 'var(--alert_warning_border)',
+      chip_primary_bg: 'var(--chip_primary_bg)',
+      chip_primary_text: 'var(--chip_primary_text)',
+      chip_secondary_bg: 'var(--chip_secondary_bg)',
+      chip_secondary_text: 'var(--chip_secondary_text)',
+      chip_error_bg: 'var(--chip_error_bg)',
+      chip_error_text: 'var(--chip_error_text)',
+      chip_warning_bg: 'var(--chip_warning_bg)',
+      chip_warning_text: 'var(--chip_warning_text)',
+      chip_success_bg: 'var(--chip_success_bg)',
+      chip_success_text: 'var(--chip_success_text)',
     },
   },
 };