@lunit/design-system 1.0.0-b.4 → 2.0.0

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

@@ -13,104 +13,90 @@ export const tokenComponentColor: TokenComponentColorValue = {
       light2: "--lunit_teal_30",
       dark1: "--lunit_teal_40",
       dark2: "--lunit_teal_40",
-      dark3: "--lunit_teal_40",
-      dark4: "--lunit_teal_40",
     },
     btn_secondary_bg: {
-      light1: "--grey_15",
-      light2: "--grey_15",
+      light1: "--grey_10",
+      light2: "--grey_00",
       dark1: "--grey_60",
       dark2: "--grey_60",
-      dark3: "--grey_60",
-      dark4: "--grey_60",
     },
     btn_error_bg: {
       light1: "--red_30",
       light2: "--red_30",
       dark1: "--red_40",
       dark2: "--red_40",
-      dark3: "--red_40",
-      dark4: "--red_40",
     },
     btn_primary_border: {
       light1: "--lunit_teal_40",
       light2: "--lunit_teal_40",
       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_primary_text_1: {
       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_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",
       dark2: "--grey_5",
-      dark3: "--grey_5",
-      dark4: "--grey_5",
     },
     btn_error_text: {
       light1: "--red_40",
       light2: "--red_40",
       dark1: "--red_40",
-      dark2: "--red_40",
-      dark3: "--red_30",
-      dark4: "--red_30",
+      dark2: "--red_30",
     },
     btn_selected_primary_bg: {
       light1: "--lunit_teal_80",
       light2: "--lunit_teal_80",
       dark1: "--lunit_teal_10",
       dark2: "--lunit_teal_10",
-      dark3: "--lunit_teal_10",
-      dark4: "--lunit_teal_10",
     },
     btn_selected_primary_text: {
       light1: "--lunit_teal_10",
       light2: "--lunit_teal_10",
       dark1: "--lunit_teal_80",
       dark2: "--lunit_teal_80",
-      dark3: "--lunit_teal_80",
-      dark4: "--lunit_teal_80",
     },
     btn_selected_secondary_bg: {
       light1: "--lunit_teal_10",
       light2: "--lunit_teal_10",
       dark1: "--grey_80",
-      dark2: "--grey_75",
-      dark3: "--grey_70",
-      dark4: "--grey_75",
+      dark2: "--grey_80",
     },
     btn_selected_secondary_text: {
-      light1: "--grey_95",
-      light2: "--grey_95",
+      light1: "--lunit_teal_70",
+      light2: "--lunit_teal_70",
       dark1: "--lunit_teal_30",
       dark2: "--lunit_teal_30",
-      dark3: "--lunit_teal_30",
-      dark4: "--lunit_teal_30",
+    },
+    btn_selected_tertiary_bg: {
+      light1: "--grey_95",
+      light2: "--grey_95",
+      dark1: "--grey_0",
+      dark2: "--grey_0",
+    },
+    btn_selected_tertiary_text: {
+      light1: "--grey_0",
+      light2: "--grey_0",
+      dark1: "--grey_100",
+      dark2: "--grey_100",
     },
   },
   selectControl: {
@@ -119,32 +105,24 @@ export const tokenComponentColor: TokenComponentColorValue = {
       light2: "--lunit_teal_40",
       dark1: "--lunit_teal_40",
       dark2: "--lunit_teal_40",
-      dark3: "--lunit_teal_40",
-      dark4: "--lunit_teal_40",
     },
     selectcontrol_off: {
       light1: "--grey_40",
       light2: "--grey_40",
       dark1: "--grey_40",
       dark2: "--grey_40",
-      dark3: "--grey_40",
-      dark4: "--grey_40",
     },
     selectcontrol_handler: {
       light1: "--grey_0",
       light2: "--grey_0",
       dark1: "--grey_0",
       dark2: "--grey_0",
-      dark3: "--grey_0",
-      dark4: "--grey_0",
     },
     selectcontrol_handler_shadow: {
       light1: "rgba(0, 0, 0, 0.4)", // "--grey_100 40%",
       light2: "rgba(0, 0, 0, 0.4)", // "--grey_100 40%",
       dark1: "rgba(0, 0, 0, 0.4)", // "--grey_100 40%",
       dark2: "rgba(0, 0, 0, 0.4)", // "--grey_100 40%",
-      dark3: "rgba(0, 0, 0, 0.4)", // "--grey_100 40%",
-      dark4: "rgba(0, 0, 0, 0.4)", // "--grey_100 40%",
     },
   },
   textFields: {
@@ -152,17 +130,13 @@ export const tokenComponentColor: TokenComponentColorValue = {
       light1: "--grey_10",
       light2: "--grey_0",
       dark1: "--grey_80",
-      dark2: "--grey_75",
-      dark3: "--grey_70",
-      dark4: "--grey_75",
+      dark2: "--grey_70",
     },
     textfield_border_error: {
       light1: "--red_40",
       light2: "--red_40",
       dark1: "--red_40",
       dark2: "--red_40",
-      dark3: "--red_40",
-      dark4: "--red_40",
     },
   },
   dropdown: {
@@ -171,8 +145,6 @@ export const tokenComponentColor: TokenComponentColorValue = {
       light2: "--grey_15",
       dark1: "--grey_60",
       dark2: "--grey_60",
-      dark3: "--grey_60",
-      dark4: "--grey_60",
     },
   },
   dataTable: {
@@ -180,25 +152,19 @@ export const tokenComponentColor: TokenComponentColorValue = {
       light1: "--grey_20",
       light2: "--grey_30",
       dark1: "--grey_50",
-      dark2: "--grey_50",
-      dark3: "--grey_50",
-      dark4: "--grey_40",
+      dark2: "--grey_40",
     },
     datatable_border_02: {
       light1: "--grey_10",
       light2: "--grey_15",
       dark1: "--grey_80",
-      dark2: "--grey_75",
-      dark3: "--grey_75",
-      dark4: "--grey_60",
+      dark2: "--grey_60",
     },
     datatable_zebra: {
       light1: "rgba(0, 0, 0, 0.03)", // "--grey_100 3%",
       light2: "rgba(0, 0, 0, 0.03)", // "--grey_100 3%",
       dark1: "rgba(255, 255, 255, 0.03)", // "--grey_00 3%",
       dark2: "rgba(255, 255, 255, 0.03)", // "--grey_00 3%",
-      dark3: "rgba(255, 255, 255, 0.03)", // "--grey_00 3%",
-      dark4: "rgba(255, 255, 255, 0.03)", // "--grey_00 3%",
     },
   },
   scrollbars: {
@@ -206,25 +172,19 @@ export const tokenComponentColor: TokenComponentColorValue = {
       light1: "--grey_20",
       light2: "--grey_20",
       dark1: "--grey_60",
-      dark2: "--grey_60",
-      dark3: "--grey_50",
-      dark4: "--grey_50",
+      dark2: "--grey_50",
     },
     scrollbars_hover: {
       light1: "--grey_30",
       light2: "--grey_30",
       dark1: "--grey_50",
-      dark2: "--grey_50",
-      dark3: "--grey_40",
-      dark4: "--grey_40",
+      dark2: "--grey_40",
     },
     scrollbars_pressed: {
       light1: "--grey_50",
       light2: "--grey_50",
       dark1: "--grey_30",
-      dark2: "--grey_30",
-      dark3: "--grey_20",
-      dark4: "--grey_20",
+      dark2: "--grey_20",
     },
   },
   modal: {
@@ -233,8 +193,6 @@ export const tokenComponentColor: TokenComponentColorValue = {
       light2: "rgba(17, 17, 19, 0.7)", // "--grey_95 70%",
       dark1: "rgba(17, 17, 19, 0.7)", // "--grey_95 70%",
       dark2: "rgba(17, 17, 19, 0.7)", // "--grey_95 70%",
-      dark3: "rgba(17, 17, 19, 0.7)", // "--grey_95 70%",
-      dark4: "rgba(17, 17, 19, 0.7)", // "--grey_95 70%",
     },
   },
   tooltip: {
@@ -243,24 +201,18 @@ export const tokenComponentColor: TokenComponentColorValue = {
       light2: "--grey_70",
       dark1: "--grey_70",
       dark2: "--grey_70",
-      dark3: "--grey_70",
-      dark4: "--grey_70",
     },
     tooltip_text_normal: {
       light1: "--grey_5",
       light2: "--grey_5",
       dark1: "--grey_5",
       dark2: "--grey_5",
-      dark3: "--grey_5",
-      dark4: "--grey_5",
     },
     tooltip_text_medium: {
       light1: "--grey_40",
       light2: "--grey_40",
       dark1: "--grey_40",
       dark2: "--grey_40",
-      dark3: "--grey_40",
-      dark4: "--grey_40",
     },
   },
   alert: {
@@ -269,64 +221,48 @@ export const tokenComponentColor: TokenComponentColorValue = {
       light2: "rgba(250, 77, 86, 0.16)", // "--red_40 16%",
       dark1: "rgba(255, 131, 137, 0.32)", // "--red_30 32%",
       dark2: "rgba(255, 131, 137, 0.32)", // "--red_30 32%",
-      dark3: "rgba(255, 131, 137, 0.32)", // "--red_30 32%",
-      dark4: "rgba(255, 131, 137, 0.32)", // "--red_30 32%",
     },
     alert_error_border: {
       light1: "--red_40",
       light2: "--red_40",
       dark1: "--red_30",
       dark2: "--red_30",
-      dark3: "--red_30",
-      dark4: "--red_30",
     },
     alert_success_bg: {
       light1: "rgba(36, 161, 72, 0.16)", // "--green_40 16%",
       light2: "rgba(36, 161, 72, 0.16)", // "--green_40 16%",
       dark1: "rgba(66, 190, 101, 0.32)", // "--green_30 32%",
       dark2: "rgba(66, 190, 101, 0.32)", // "--green_30 32%",
-      dark3: "rgba(66, 190, 101, 0.32)", // "--green_30 32%",
-      dark4: "rgba(66, 190, 101, 0.32)", // "--green_30 32%",
     },
     alert_success_border: {
       light1: "--green_30",
       light2: "--green_30",
       dark1: "--green_30",
       dark2: "--green_30",
-      dark3: "--green_30",
-      dark4: "--green_30",
     },
     alert_info_bg: {
       light1: "rgba(69, 137, 255, 0.16)", // "--blue_40 16%",
       light2: "rgba(69, 137, 255, 0.16)", // "--blue_40 16%",
       dark1: "rgba(120, 169, 255, 0.32)", // "--blue_30 32%",
       dark2: "rgba(120, 169, 255, 0.32)", // "--blue_30 32%",
-      dark3: "rgba(120, 169, 255, 0.32)", // "--blue_30 32%",
-      dark4: "rgba(120, 169, 255, 0.32)", // "--blue_30 32%",
     },
     alert_info_border: {
       light1: "--blue_40",
       light2: "--blue_40",
       dark1: "--blue_30",
       dark2: "--blue_30",
-      dark3: "--blue_30",
-      dark4: "--blue_30",
     },
     alert_warning_bg: {
       light1: "rgba(245, 134, 54, 0.16)", // "--orange_40 16%",
       light2: "rgba(245, 134, 54, 0.16)", // "--orange_40 16%",
       dark1: "rgba(255, 155, 84, 0.32)", // "--orange_30 32%",
       dark2: "rgba(255, 155, 84, 0.32)", // "--orange_30 32%",
-      dark3: "rgba(255, 155, 84, 0.32)", // "--orange_30 32%",
-      dark4: "rgba(255, 155, 84, 0.32)", // "--orange_30 32%",
     },
     alert_warning_border: {
       light1: "--orange_40",
       light2: "--orange_40",
       dark1: "--orange_30",
       dark2: "--orange_30",
-      dark3: "--orange_30",
-      dark4: "--orange_30",
     },
   },
   chip: {
@@ -335,80 +271,60 @@ export const tokenComponentColor: TokenComponentColorValue = {
       light2: "--lunit_teal_20",
       dark1: "--lunit_teal_60",
       dark2: "--lunit_teal_60",
-      dark3: "--lunit_teal_60",
-      dark4: "--lunit_teal_60",
     },
     chip_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",
     },
     chip_secondary_bg: {
       light1: "--grey_15",
       light2: "--grey_15",
       dark1: "--grey_60",
       dark2: "--grey_60",
-      dark3: "--grey_60",
-      dark4: "--grey_60",
     },
     chip_secondary_text: {
       light1: "--grey_40",
       light2: "--grey_40",
       dark1: "--grey_30",
       dark2: "--grey_30",
-      dark3: "--grey_30",
-      dark4: "--grey_30",
     },
     chip_error_bg: {
       light1: "--red_20",
       light2: "--red_20",
       dark1: "--red_60",
       dark2: "--red_60",
-      dark3: "--red_60",
-      dark4: "--red_60",
     },
     chip_error_text: {
       light1: "--red_40",
       light2: "--red_40",
       dark1: "--red_30",
       dark2: "--red_30",
-      dark3: "--red_30",
-      dark4: "--red_30",
     },
     chip_warning_bg: {
       light1: "--orange_20",
       light2: "--orange_20",
       dark1: "--orange_60",
       dark2: "--orange_60",
-      dark3: "--orange_60",
-      dark4: "--orange_60",
     },
     chip_warning_text: {
       light1: "--orange_40",
       light2: "--orange_40",
       dark1: "--orange_30",
       dark2: "--orange_30",
-      dark3: "--orange_30",
-      dark4: "--orange_30",
     },
     chip_success_bg: {
       light1: "--green_20",
       light2: "--green_20",
       dark1: "--green_60",
       dark2: "--green_60",
-      dark3: "--green_60",
-      dark4: "--green_60",
     },
     chip_success_text: {
       light1: "--green_40",
       light2: "--green_40",
       dark1: "--green_30",
       dark2: "--green_30",
-      dark3: "--green_30",
-      dark4: "--green_30",
     },
   },
 };

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

@@ -9,201 +9,169 @@ export const tokenCoreColor: TokenCoreColorValue = {
     light1: "--grey_0",
     light2: "--grey_10",
     dark1: "--grey_90",
-    dark2: "--grey_85",
-    dark3: "--grey_80",
-    dark4: "--grey_70",
+    dark2: "--grey_75",
   },
   bg_02: {
     light1: "--grey_0",
     light2: "--grey_0",
     dark1: "--grey_70",
     dark2: "--grey_70",
-    dark3: "--grey_70",
-    dark4: "--grey_70",
   },
   bg_03: {
     light1: "--grey_0",
     light2: "--grey_0",
     dark1: "--grey_85",
     dark2: "--grey_85",
-    dark3: "--grey_85",
-    dark4: "--grey_85",
+  },
+  layer_01: {
+    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",
-    dark3: "--lunit_teal_40",
-    dark4: "--lunit_teal_40",
   },
   text_normal: {
     light1: "--grey_95",
     light2: "--grey_95",
     dark1: "--grey_5",
     dark2: "--grey_5",
-    dark3: "--grey_5",
-    dark4: "--grey_5",
   },
   text_medium: {
     light1: "--grey_60",
     light2: "--grey_60",
-    dark1: "--grey_40",
-    dark2: "--grey_40",
-    dark3: "--grey_40",
-    dark4: "--grey_30",
+    dark1: "--grey_30",
+    dark2: "--grey_30",
   },
   text_light: {
     light1: "--grey_40",
     light2: "--grey_40",
     dark1: "--grey_50",
     dark2: "--grey_50",
-    dark3: "--grey_50",
-    dark4: "--grey_40",
   },
   text_error: {
     light1: "--red_40",
     light2: "--red_40",
     dark1: "--red_40",
-    dark2: "--red_40",
-    dark3: "--red_30",
-    dark4: "--red_30",
+    dark2: "--red_30",
   },
   text_success: {
     light1: "--green_40",
     light2: "--green_40",
     dark1: "--green_40",
-    dark2: "--green_40",
-    dark3: "--green_30",
-    dark4: "--green_30",
+    dark2: "--green_30",
   },
   text_warning: {
     light1: "--orange_40",
     light2: "--orange_40",
     dark1: "--orange_40",
-    dark2: "--orange_40",
-    dark3: "--orange_30",
-    dark4: "--orange_30",
+    dark2: "--orange_30",
   },
   text_info: {
     light1: "--blue_40",
     light2: "--blue_40",
     dark1: "--blue_40",
-    dark2: "--blue_40",
-    dark3: "--blue_30",
-    dark4: "--blue_30",
+    dark2: "--blue_30",
   },
   link_primary: {
     light1: "--blue_40",
     light2: "--blue_40",
-    dark1: "--blue_40",
-    dark2: "--blue_40",
-    dark3: "--blue_30",
-    dark4: "--blue_30",
+    dark1: "--blue_30",
+    dark2: "--blue_30",
   },
   link_hover: {
     light1: "--blue_50",
     light2: "--blue_50",
-    dark1: "--blue_50",
-    dark2: "--blue_50",
-    dark3: "--blue_40",
-    dark4: "--blue_40",
+    dark1: "--blue_40",
+    dark2: "--blue_40",
   },
   link_visited: {
     light1: "--purple_50",
     light2: "--purple_50",
-    dark1: "--purple_50",
-    dark2: "--purple_50",
-    dark3: "--purple_40",
-    dark4: "--purple_40",
+    dark1: "--purple_40",
+    dark2: "--purple_40",
   },
   icon_error_02: {
     light1: "--red_40",
     light2: "--red_40",
     dark1: "--red_30",
     dark2: "--red_30",
-    dark3: "--red_30",
-    dark4: "--red_30",
   },
   icon_success_02: {
     light1: "--green_40",
     light2: "--green_40",
     dark1: "--green_30",
     dark2: "--green_30",
-    dark3: "--green_30",
-    dark4: "--green_30",
   },
   icon_warning_02: {
     light1: "--orange_40",
     light2: "--orange_40",
     dark1: "--orange_30",
     dark2: "--orange_30",
-    dark3: "--orange_30",
-    dark4: "--orange_30",
   },
   icon_info_02: {
     light1: "--blue_40",
     light2: "--blue_40",
     dark1: "--blue_30",
     dark2: "--blue_30",
-    dark3: "--blue_30",
-    dark4: "--blue_30",
   },
   hover: {
     // TODO: 알파값 적용 코드는 일단 하드코딩. 나중에 수정할것
-    light1: "rgba(0, 0, 0, 0.1)", // grey_100 10%
-    light2: "rgba(0, 0, 0, 0.1)", // grey_100 10%
-    dark1: "rgba(0, 0, 0, 0.1)", // grey_100 10%
-    dark2: "rgba(0, 0, 0, 0.1)", // grey_100 10%
-    dark3: "rgba(0, 0, 0, 0.1)", // grey_100 10%
-    dark4: "rgba(0, 0, 0, 0.1)", // grey_100 10%
+    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: {
     light1: "--lunit_teal_40",
     light2: "--lunit_teal_40",
     dark1: "--lunit_teal_40",
     dark2: "--lunit_teal_40",
-    dark3: "--lunit_teal_40",
-    dark4: "--lunit_teal_40",
   },
   selected: {
     light1: "--lunit_teal_10",
     light2: "--lunit_teal_10",
     dark1: "--lunit_teal_80",
     dark2: "--lunit_teal_80",
-    dark3: "--lunit_teal_80",
-    dark4: "--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%",
-    dark4: "rgba(0, 0, 0, 0.32)", // "--grey_100 32%",
-    dark3: "rgba(0, 0, 0, 0.32)", // "--grey_100 32%",
-    dark2: "rgba(0, 0, 0, 0.32)", // "--grey_100 32%",
     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%",
-    dark4: "rgba(0, 0, 0, 0.4)", // "--grey_100 40%",
-    dark3: "rgba(0, 0, 0, 0.4)", // "--grey_100 40%",
-    dark2: "rgba(0, 0, 0, 0.4)", // "--grey_100 40%",
     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%",
-    dark4: "rgba(0, 0, 0, 0.36)", // "--grey_100 36%",
-    dark3: "rgba(0, 0, 0, 0.36)", // "--grey_100 36%",
-    dark2: "rgba(0, 0, 0, 0.36)", // "--grey_100 36%",
     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%",
-    dark4: "rgba(0, 0, 0, 0.48)", // "--grey_100 48%",
-    dark3: "rgba(0, 0, 0, 0.48)", // "--grey_100 48%",
-    dark2: "rgba(0, 0, 0, 0.48)", // "--grey_100 48%",
     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%",
+  },
+  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%",
   },
 };

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

@@ -3,6 +3,4 @@ export interface ColorTokenValueBySurface {
   light2: string;
   dark1: string;
   dark2: string;
-  dark3: string;
-  dark4: string;
 }