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

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

@@ -0,0 +1,36 @@
+export const grey = {
+  0: "#FFFFFF",
+  5: "#FAFAFB",
+  10: "#F1F1F4",
+  15: "#DFDFE2",
+  20: "#C6C6C8",
+  30: "#AFAFB1",
+  40: "#99999B",
+  50: "#747477",
+  60: "#626264",
+  70: "#4E4E50",
+  75: "#404042",
+  80: "#333336",
+  85: "#2D2D2F",
+  90: "#1F1F21",
+  95: "#111113",
+  100: "#000000",
+};
+
+export const greyText = {
+  0: grey[95],
+  5: grey[95],
+  10: grey[95],
+  15: grey[95],
+  20: grey[95],
+  30: grey[95],
+  40: grey[95],
+  50: grey[5],
+  60: grey[5],
+  70: grey[5],
+  80: grey[5],
+  85: grey[5],
+  90: grey[5],
+  95: grey[5],
+  100: grey[5],
+};

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

@@ -0,0 +1,11 @@
+export * from "./blue";
+export * from "./green";
+export * from "./grey";
+export * from "./lunitGreen";
+export * from "./lunitTeal";
+export * from "./magenta";
+export * from "./orange";
+export * from "./red";
+export * from "./yellow";
+export * from "./purple";
+export * from "./opacity";

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

@@ -0,0 +1,27 @@
+import { grey } from "./grey";
+
+export const lunitGreen = {
+  5: "#F5FBE7",
+  10: "#EFF8BC",
+  20: "#E5F39E",
+  30: "#E1EE91",
+  40: "#DCEB7A",
+  50: "#D2EA60",
+  60: "#CEE559",
+  70: "#CADE5C",
+  80: "#BED358",
+  90: "#B1C953",
+};
+
+export const lunitGreenText = {
+  5: grey[95],
+  10: grey[95],
+  20: grey[95],
+  30: grey[95],
+  40: grey[95],
+  50: grey[95],
+  60: grey[95],
+  70: grey[95],
+  80: grey[95],
+  90: grey[95],
+};

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

@@ -0,0 +1,27 @@
+import { grey } from "./grey";
+
+export const lunitTeal = {
+  5: "#EAFAFF",
+  10: "#D1F7FF",
+  20: "#96EDFF",
+  30: "#30DFFC",
+  40: "#00C9EA",
+  50: "#01AED4",
+  60: "#048AB4",
+  70: "#016D8F",
+  80: "#05495F",
+  90: "#002930",
+};
+
+export const lunitTealText = {
+  5: lunitTeal[90],
+  10: lunitTeal[90],
+  20: grey[95],
+  30: grey[95],
+  40: grey[95],
+  50: grey[5],
+  60: grey[5],
+  70: grey[5],
+  80: grey[5],
+  90: lunitTeal[5],
+};

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

@@ -0,0 +1,27 @@
+import { grey } from "./grey";
+
+export const magenta = {
+  5: "#FFF0F7",
+  10: "#FFD6E8",
+  20: "#FAB2D3",
+  30: "#F681B7",
+  40: "#FF50A0",
+  50: "#E41976",
+  60: "#9F1853",
+  70: "#740937",
+  80: "#57042A",
+  90: "#2A0A18",
+};
+
+export const magentaText = {
+  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/opacity.ts

@@ -0,0 +1,6 @@
+export const opacity = {
+  1: "rgba(0, 0, 0, 0.12)",
+  2: "rgba(0, 0, 0, 0.65)",
+  3: "rgba(255, 255, 255, 0.12)",
+  4: "rgba(255, 255, 255, 0.65)",
+};

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

@@ -0,0 +1,27 @@
+import { grey } from "./grey";
+
+export const orange = {
+  5: "#FFF2E8",
+  10: "#FFD9BE",
+  20: "#FFB784",
+  30: "#FF9B54",
+  40: "#F58636",
+  50: "#D36210",
+  60: "#AB4800",
+  70: "#6F3209",
+  80: "#3E1A00",
+  90: "#231000",
+};
+
+export const orangeText = {
+  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/purple.ts

@@ -0,0 +1,27 @@
+import { grey } from "./grey";
+
+export const purple = {
+  5: "#F6F2FF",
+  10: "#E6D7FF",
+  20: "#D4BBFF",
+  30: "#BE95FF",
+  40: "#9E6BF0",
+  50: "#7E41DA",
+  60: "#6B2FC1",
+  70: "#5D22B1",
+  80: "#441C7E",
+  90: "#1D0345",
+};
+
+export const purpleText = {
+  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/red.ts

@@ -0,0 +1,27 @@
+import { grey } from "./grey";
+
+export const red = {
+  5: "#FFF1F1",
+  10: "#FFD7D9",
+  20: "#FFB3B8",
+  30: "#FF8389",
+  40: "#FA4D56",
+  50: "#DA1E28",
+  60: "#A2191F",
+  70: "#750E13",
+  80: "#520408",
+  90: "#3E0600",
+};
+
+export const redText = {
+  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/yellow.ts

@@ -0,0 +1,27 @@
+import { grey } from "./grey";
+
+export const yellow = {
+  5: "#FCF4D6",
+  10: "#FFF9C7",
+  20: "#FFF296",
+  30: "#FFEA5D",
+  40: "#FFDE03",
+  50: "#E1B000",
+  60: "#A67B0E",
+  70: "#6E5002",
+  80: "#584106",
+  90: "#3B2B00",
+};
+
+export const yellowText = {
+  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/index.ts

@@ -0,0 +1,235 @@
+// 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";
+
+export type BaseColor = Record<keyof typeof base.blue, PaletteColor>;
+export type GreyColor = Record<keyof typeof base.grey, PaletteColor>;
+
+declare module "@mui/material/styles/createPalette" {
+  interface PaletteOptions {
+    lunit?: {
+      grey: GreyColor;
+      blue: BaseColor;
+      green: BaseColor;
+      lunitGreen: BaseColor;
+      lunitTeal: BaseColor;
+      magenta: BaseColor;
+      orange: BaseColor;
+      red: BaseColor;
+      yellow: BaseColor;
+    };
+    token?: ColorToken;
+  }
+
+  interface Palette {
+    lunit: {
+      grey: GreyColor;
+      blue: BaseColor;
+      green: BaseColor;
+      lunitGreen: BaseColor;
+      lunitTeal: BaseColor;
+      magenta: BaseColor;
+      orange: BaseColor;
+      red: BaseColor;
+      yellow: BaseColor;
+    };
+    token: ColorToken;
+  }
+}
+
+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];
+      }
+    }
+  }
+  return cssVars;
+};
+
+const createTokenColorVariables = (surface: keyof ColorTokenValueBySurface) => {
+  const cssVars: { [name: string]: string } = {};
+
+  for (let coreToken in token.tokenCoreColor) {
+    if (token.tokenCoreColor.hasOwnProperty(coreToken)) {
+      const varName = `--${coreToken}`;
+      const tokenValue = token.tokenCoreColor[coreToken][surface];
+      // 현재 tokenValue는 cssVariable과 rgba 값 2종류가 존재함. 이 종류에 따라서 var 사용 여부를 결정해주기 위해 if문을 추가하였으나,
+      // 차후 피그마에서 json 파일을 넘겨준 것을 스크립트화하는 작업이 끝나면 if문 자체가 사라질 예정.
+      if (tokenValue.charAt(0) === "-") {
+        cssVars[varName] = `var(${tokenValue})`;
+      } else {
+        cssVars[varName] = `${tokenValue}`;
+      }
+    }
+  }
+
+  for (let componentGroup in token.tokenComponentColor) {
+    if (token.tokenComponentColor.hasOwnProperty(componentGroup)) {
+      const componentTokens = token.tokenComponentColor[componentGroup];
+
+      let tokenName: keyof typeof componentTokens;
+      for (tokenName in componentTokens) {
+        if (componentTokens.hasOwnProperty(tokenName)) {
+          const varName = `--${tokenName}`;
+          const tokenValue = componentTokens[tokenName][surface];
+          if (tokenValue.charAt(0) === "-") {
+            cssVars[varName] = `var(${tokenValue})`;
+          } else {
+            cssVars[varName] = `${tokenValue}`;
+          }
+        }
+      }
+    }
+  }
+  return cssVars;
+};
+
+export const createColorCssBaseline = () => {
+  return {
+    ":root": {
+      ...createCSSVariables(),
+    },
+    ".light1": {
+      ...createTokenColorVariables("light1"),
+    },
+    ".light2": {
+      ...createTokenColorVariables("light2"),
+    },
+    ".dark1": {
+      ...createTokenColorVariables("dark1"),
+    },
+    ".dark2": {
+      ...createTokenColorVariables("dark2"),
+    },
+    ".dark3": {
+      ...createTokenColorVariables("dark3"),
+    },
+    ".dark4": {
+      ...createTokenColorVariables("dark4"),
+    },
+  };
+};
+
+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,
+          };
+        }
+      }
+    }
+  }
+  return ret;
+})();
+
+const paletteOptions = {
+  lunit: lunitColors,
+  token: {
+    core: {
+      bg_01: "var(--bg_01)",
+      bg_02: "var(--bg_02)",
+      bg_03: "var(--bg_03)",
+      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)",
+      focused: "var(--focused)",
+      shadow_01: "var(--shadow_01)",
+      shadow_02: "var(--shadow_02)",
+      shadow_03: "var(--shadow_03)",
+      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_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)",
+      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_option_selected: "var(--dropdown_option_selected)",
+      dropdown_divider_border: "var(--dropdown_divider_border)",
+      dropdown_option_activatied: "var(--dropdown_option_activatied)",
+      datatable_cell_selected: "var(--datatable_cell_selected)",
+      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)",
+    },
+  },
+};
+
+export default paletteOptions;