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

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

@@ -1,6 +1,6 @@
 import { grey } from "./grey";
 
-export const lunitTeal = {
+export const lunit_teal = {
   5: "#EAFAFF",
   10: "#D1F7FF",
   20: "#96EDFF",
@@ -13,9 +13,9 @@ export const lunitTeal = {
   90: "#002930",
 };
 
-export const lunitTealText = {
-  5: lunitTeal[90],
-  10: lunitTeal[90],
+export const lunit_tealText = {
+  5: lunit_teal[90],
+  10: lunit_teal[90],
   20: grey[95],
   30: grey[95],
   40: grey[95],
@@ -23,5 +23,5 @@ export const lunitTealText = {
   60: grey[5],
   70: grey[5],
   80: grey[5],
-  90: lunitTeal[5],
+  90: lunit_teal[5],
 };

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

@@ -4,8 +4,8 @@ export const red = {
   5: "#FFF1F1",
   10: "#FFD7D9",
   20: "#FFB3B8",
-  30: "#FF8389",
-  40: "#FA4D56",
+  30: "#FF7077",
+  40: "#FA464F",
   50: "#DA1E28",
   60: "#A2191F",
   70: "#750E13",

package/src/foundation/colors/index.ts

@@ -15,8 +15,8 @@ declare module "@mui/material/styles/createPalette" {
       grey: GreyColor;
       blue: BaseColor;
       green: BaseColor;
-      lunitGreen: BaseColor;
-      lunitTeal: BaseColor;
+      lunit_green: BaseColor;
+      lunit_teal: BaseColor;
       magenta: BaseColor;
       orange: BaseColor;
       red: BaseColor;
@@ -30,8 +30,8 @@ declare module "@mui/material/styles/createPalette" {
       grey: GreyColor;
       blue: BaseColor;
       green: BaseColor;
-      lunitGreen: BaseColor;
-      lunitTeal: BaseColor;
+      lunit_green: BaseColor;
+      lunit_teal: BaseColor;
       magenta: BaseColor;
       orange: BaseColor;
       red: BaseColor;
@@ -49,7 +49,7 @@ const createCSSVariables = () => {
     const baseColors = base[color as ColorKey];
     for (let key in baseColors) {
       if (baseColors.hasOwnProperty(key)) {
-        const varName = `--${color}-${key}`;
+        const varName = `--${color}_${key}`;
         cssVars[varName] = baseColors[Number(key) as keyof typeof baseColors];
       }
     }
@@ -99,6 +99,7 @@ export const createColorCssBaseline = () => {
   return {
     ":root": {
       ...createCSSVariables(),
+      ...createTokenColorVariables("dark1"),
     },
     ".light1": {
       ...createTokenColorVariables("light1"),
@@ -121,6 +122,7 @@ export const createColorCssBaseline = () => {
   };
 };
 
+// TODO: TextColors 삭제하고 관련된 설정 수정하기
 const lunitColors: PaletteOptions["lunit"] = ((): PaletteOptions["lunit"] => {
   const ret: any = {};
   for (const colorKey in base) {
@@ -146,6 +148,25 @@ const lunitColors: PaletteOptions["lunit"] = ((): PaletteOptions["lunit"] => {
 })();
 
 const paletteOptions = {
+  primary: {
+    main: base.lunit_teal[40], // core.text_primary.dark1
+  },
+  secondary: {
+    main: base.grey[50], // core.text_light.dark1
+  },
+  error: {
+    main: base.red[40], // core.text_error.dark1
+  },
+  warning: {
+    main: base.orange[40], // core.text_warning.dark1
+  },
+  info: {
+    main: base.blue[40], // core.text_info.dark1
+  },
+  success: {
+    main: base.green[40], // core.text_success.dark1
+  },
+  grey: base.greyForMUI,
   lunit: lunitColors,
   token: {
     core: {
@@ -169,6 +190,7 @@ const paletteOptions = {
       icon_info_02: "var(--icon_info_02)",
       hover: "var(--hover)",
       focused: "var(--focused)",
+      selected: "var(--selected)",
       shadow_01: "var(--shadow_01)",
       shadow_02: "var(--shadow_02)",
       shadow_03: "var(--shadow_03)",
@@ -196,10 +218,7 @@ const paletteOptions = {
       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)",
@@ -232,4 +251,6 @@ const paletteOptions = {
   },
 };
 
+export { base };
+
 export default paletteOptions;