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

package/dist/foundation/colors/token/component.js

@@ -1,151 +1,150 @@
 export const tokenComponentColor = {
     btn: {
         btn_contained_primary_bg: {
-            light1: "--lunitTeal-40",
-            light2: "--lunitTeal-40",
-            dark1: "--lunitTeal-40",
-            dark2: "--lunitTeal-40",
-            dark3: "--lunitTeal-40",
-            dark4: "--lunitTeal-40",
+            light1: "--lunit_teal_30",
+            light2: "--lunit_teal_30",
+            dark1: "--lunit_teal_40",
+            dark2: "--lunit_teal_40",
+            dark3: "--lunit_teal_40",
+            dark4: "--lunit_teal_40",
         },
         btn_contained_primary_text: {
-            light1: "--grey-95",
-            light2: "--grey-95",
-            dark1: "--grey-95",
-            dark2: "--grey-95",
-            dark3: "--grey-95",
-            dark4: "--grey-95",
+            light1: "--grey_95",
+            light2: "--grey_95",
+            dark1: "--grey_95",
+            dark2: "--grey_95",
+            dark3: "--grey_95",
+            dark4: "--grey_95",
         },
         btn_contained_secondary_bg: {
-            light1: "--grey-15",
-            light2: "--grey-15",
-            dark1: "--grey-60",
-            dark2: "--grey-60",
-            dark3: "--grey-60",
-            dark4: "--grey-60",
+            light1: "--grey_15",
+            light2: "--grey_15",
+            dark1: "--grey_60",
+            dark2: "--grey_60",
+            dark3: "--grey_60",
+            dark4: "--grey_60",
         },
         btn_contained_secondary_text: {
-            light1: "--grey-95",
-            light2: "--grey-95",
-            dark1: "--grey-5",
-            dark2: "--grey-5",
-            dark3: "--grey-5",
-            dark4: "--grey-5",
+            light1: "--grey_95",
+            light2: "--grey_95",
+            dark1: "--grey_5",
+            dark2: "--grey_5",
+            dark3: "--grey_5",
+            dark4: "--grey_5",
         },
         btn_contained_error_bg: {
-            light1: "--red-40",
-            light2: "--red-40",
-            dark1: "--red-40",
-            dark2: "--red-40",
-            dark3: "--red-40",
-            dark4: "--red-40",
+            light1: "--red_30",
+            light2: "--red_30",
+            dark1: "--red_40",
+            dark2: "--red_40",
+            dark3: "--red_40",
+            dark4: "--red_40",
         },
         btn_contained_error_text: {
-            light1: "--grey-95",
-            light2: "--grey-95",
-            dark1: "--grey-95",
-            dark2: "--grey-95",
-            dark3: "--grey-95",
-            dark4: "--grey-95",
+            light1: "--grey_95",
+            light2: "--grey_95",
+            dark1: "--grey_95",
+            dark2: "--grey_95",
+            dark3: "--grey_95",
+            dark4: "--grey_95",
         },
         btn_outlined_primary_border: {
-            light1: "--lunitTeal-50",
-            light2: "--lunitTeal-50",
-            dark1: "--lunitTeal-40",
-            dark2: "--lunitTeal-40",
-            dark3: "--lunitTeal-40",
-            dark4: "--lunitTeal-40",
+            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_outlined_primary_text: {
-            light1: "--lunitTeal-50",
-            light2: "--lunitTeal-50",
-            dark1: "--lunitTeal-40",
-            dark2: "--lunitTeal-40",
-            dark3: "--lunitTeal-40",
-            dark4: "--lunitTeal-40",
+            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_ghost_primary_text: {
-            light1: "--lunitTeal-50",
-            light2: "--lunitTeal-50",
-            dark1: "--lunitTeal-40",
-            dark2: "--lunitTeal-40",
-            dark3: "--lunitTeal-40",
-            dark4: "--lunitTeal-40",
+            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_ghost_secondary_text: {
-            light1: "--grey-95",
-            light2: "--grey-95",
-            dark1: "--grey-5",
-            dark2: "--grey-5",
-            dark3: "--grey-5",
-            dark4: "--grey-5",
+            light1: "--grey_95",
+            light2: "--grey_95",
+            dark1: "--grey_5",
+            dark2: "--grey_5",
+            dark3: "--grey_5",
+            dark4: "--grey_5",
         },
         btn_ghost_error_text: {
-            light1: "--red-40",
-            light2: "--red-40",
-            dark1: "--red-40",
-            dark2: "--red-40",
-            dark3: "--red-30",
-            dark4: "--red-30",
+            light1: "--red_40",
+            light2: "--red_40",
+            dark1: "--red_40",
+            dark2: "--red_40",
+            dark3: "--red_30",
+            dark4: "--red_30",
         },
         btn_selected_primary_bg: {
-            light1: "--lunitTeal-80",
-            light2: "--lunitTeal-80",
-            dark1: "--lunitTeal-10",
-            dark2: "--lunitTeal-10",
-            dark3: "--lunitTeal-10",
-            dark4: "--lunitTeal-10",
+            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: "--lunitTeal-10",
-            light2: "--lunitTeal-10",
-            dark1: "--lunitTeal-80",
-            dark2: "--lunitTeal-80",
-            dark3: "--lunitTeal-80",
-            dark4: "--lunitTeal-80",
+            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: {
-            // TODO: 피그마에 작성된 코드와 색상의 값이 달라 확인중
-            light1: "--lunitTeal-10",
-            light2: "--lunitTeal-10",
-            dark1: "--grey-80",
-            dark2: "--grey-75",
-            dark3: "--grey-70",
-            dark4: "--grey-75",
+            light1: "--lunit_teal_10",
+            light2: "--lunit_teal_10",
+            dark1: "--grey_80",
+            dark2: "--grey_75",
+            dark3: "--grey_70",
+            dark4: "--grey_75",
         },
         btn_selected_secondary_text: {
-            light1: "--grey-95",
-            light2: "--grey-95",
-            dark1: "--lunitTeal-30",
-            dark2: "--lunitTeal-30",
-            dark3: "--lunitTeal-30",
-            dark4: "--lunitTeal-30",
+            light1: "--grey_95",
+            light2: "--grey_95",
+            dark1: "--lunit_teal_30",
+            dark2: "--lunit_teal_30",
+            dark3: "--lunit_teal_30",
+            dark4: "--lunit_teal_30",
         },
     },
     selectControl: {
         selectcontrol_on: {
-            light1: "--lunitTeal-40",
-            light2: "--lunitTeal-40",
-            dark1: "--lunitTeal-40",
-            dark2: "--lunitTeal-40",
-            dark3: "--lunitTeal-40",
-            dark4: "--lunitTeal-40",
+            light1: "--lunit_teal_40",
+            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",
+            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",
+            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)",
@@ -153,78 +152,53 @@ export const tokenComponentColor = {
             dark1: "rgba(0, 0, 0, 0.4)",
             dark2: "rgba(0, 0, 0, 0.4)",
             dark3: "rgba(0, 0, 0, 0.4)",
-            dark4: "rgba(0, 0, 0, 0.4)", // "--grey-100 40%",
+            dark4: "rgba(0, 0, 0, 0.4)", // "--grey_100 40%",
         },
     },
     textFields: {
         textfield_bg: {
-            light1: "--grey-10",
-            light2: "--grey-00",
-            dark1: "--grey-80",
-            dark2: "--grey-75",
-            dark3: "--grey-70",
-            dark4: "--grey-75",
+            light1: "--grey_10",
+            light2: "--grey_0",
+            dark1: "--grey_80",
+            dark2: "--grey_75",
+            dark3: "--grey_70",
+            dark4: "--grey_75",
         },
         textfield_border_error: {
-            light1: "--red-40",
-            light2: "--red-40",
-            dark1: "--red-40",
-            dark2: "--red-40",
-            dark3: "--red-40",
-            dark4: "--red-40",
+            light1: "--red_40",
+            light2: "--red_40",
+            dark1: "--red_40",
+            dark2: "--red_40",
+            dark3: "--red_40",
+            dark4: "--red_40",
         },
     },
     dropdown: {
-        dropdown_option_selected: {
-            light1: "--lunitTeal-10",
-            light2: "--lunitTeal-10",
-            dark1: "--lunitTeal-80",
-            dark2: "--lunitTeal-80",
-            dark3: "--lunitTeal-80",
-            dark4: "--lunitTeal-80",
-        },
         dropdown_divider_border: {
-            light1: "--grey-15",
-            light2: "--grey-15",
-            dark1: "--grey-60",
-            dark2: "--grey-60",
-            dark3: "--grey-60",
-            dark4: "--grey-60",
-        },
-        dropdown_option_activatied: {
-            // TODO: 오타 수정 요청 => activated. 피그마에 토큰이 없어서 사용하는지 여부 확인중
-            light1: "--lunitTeal-10",
-            light2: "--lunitTeal-10",
-            dark1: "--lunitTeal-80",
-            dark2: "--lunitTeal-80",
-            dark3: "--lunitTeal-80",
-            dark4: "--lunitTeal-80",
+            light1: "--grey_15",
+            light2: "--grey_15",
+            dark1: "--grey_60",
+            dark2: "--grey_60",
+            dark3: "--grey_60",
+            dark4: "--grey_60",
         },
     },
     dataTable: {
-        datatable_cell_selected: {
-            light1: "--lunitTeal-10",
-            light2: "--lunitTeal-10",
-            dark1: "--lunitTeal-80",
-            dark2: "--lunitTeal-80",
-            dark3: "--lunitTeal-80",
-            dark4: "--lunitTeal-80",
-        },
         datatable_border_01: {
-            light1: "--grey-20",
-            light2: "--grey-30",
-            dark1: "--grey-50",
-            dark2: "--grey-50",
-            dark3: "--grey-50",
-            dark4: "--grey-40",
+            light1: "--grey_20",
+            light2: "--grey_30",
+            dark1: "--grey_50",
+            dark2: "--grey_50",
+            dark3: "--grey_50",
+            dark4: "--grey_40",
         },
         datatable_border_02: {
-            light1: "--grey-10",
-            light2: "--grey-15",
-            dark1: "--grey-80",
-            dark2: "--grey-75",
-            dark3: "--grey-75",
-            dark4: "--grey-60",
+            light1: "--grey_10",
+            light2: "--grey_15",
+            dark1: "--grey_80",
+            dark2: "--grey_75",
+            dark3: "--grey_75",
+            dark4: "--grey_60",
         },
         datatable_zebra: {
             light1: "rgba(0, 0, 0, 0.03)",
@@ -232,33 +206,33 @@ export const tokenComponentColor = {
             dark1: "rgba(255, 255, 255, 0.03)",
             dark2: "rgba(255, 255, 255, 0.03)",
             dark3: "rgba(255, 255, 255, 0.03)",
-            dark4: "rgba(255, 255, 255, 0.03)", // "--grey-00 3%",
+            dark4: "rgba(255, 255, 255, 0.03)", // "--grey_00 3%",
         },
     },
     scrollbars: {
         scrollbars_bg: {
-            light1: "--grey-20",
-            light2: "--grey-20",
-            dark1: "--grey-60",
-            dark2: "--grey-60",
-            dark3: "--grey-50",
-            dark4: "--grey-50",
+            light1: "--grey_20",
+            light2: "--grey_20",
+            dark1: "--grey_60",
+            dark2: "--grey_60",
+            dark3: "--grey_50",
+            dark4: "--grey_50",
         },
         scrollbars_hover: {
-            light1: "--grey-30",
-            light2: "--grey-30",
-            dark1: "--grey-50",
-            dark2: "--grey-50",
-            dark3: "--grey-40",
-            dark4: "--grey-40",
+            light1: "--grey_30",
+            light2: "--grey_30",
+            dark1: "--grey_50",
+            dark2: "--grey_50",
+            dark3: "--grey_40",
+            dark4: "--grey_40",
         },
         scrollbars_pressed: {
-            light1: "--grey-50",
-            light2: "--grey-50",
-            dark1: "--grey-30",
-            dark2: "--grey-30",
-            dark3: "--grey-20",
-            dark4: "--grey-20",
+            light1: "--grey_50",
+            light2: "--grey_50",
+            dark1: "--grey_30",
+            dark2: "--grey_30",
+            dark3: "--grey_20",
+            dark4: "--grey_20",
         },
     },
     modal: {
@@ -268,33 +242,33 @@ export const tokenComponentColor = {
             dark1: "rgba(17, 17, 19, 0.7)",
             dark2: "rgba(17, 17, 19, 0.7)",
             dark3: "rgba(17, 17, 19, 0.7)",
-            dark4: "rgba(17, 17, 19, 0.7)", // "--grey-95 70%",
+            dark4: "rgba(17, 17, 19, 0.7)", // "--grey_95 70%",
         },
     },
     tooltip: {
         tooltip_bg: {
-            light1: "--grey-70",
-            light2: "--grey-70",
-            dark1: "--grey-70",
-            dark2: "--grey-70",
-            dark3: "--grey-70",
-            dark4: "--grey-70",
+            light1: "--grey_70",
+            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",
+            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",
+            light1: "--grey_40",
+            light2: "--grey_40",
+            dark1: "--grey_40",
+            dark2: "--grey_40",
+            dark3: "--grey_40",
+            dark4: "--grey_40",
         },
     },
     alert: {
@@ -304,15 +278,15 @@ export const tokenComponentColor = {
             dark1: "rgba(255, 131, 137, 0.32)",
             dark2: "rgba(255, 131, 137, 0.32)",
             dark3: "rgba(255, 131, 137, 0.32)",
-            dark4: "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",
+            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)",
@@ -320,15 +294,15 @@ export const tokenComponentColor = {
             dark1: "rgba(66, 190, 101, 0.32)",
             dark2: "rgba(66, 190, 101, 0.32)",
             dark3: "rgba(66, 190, 101, 0.32)",
-            dark4: "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",
+            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)",
@@ -336,15 +310,15 @@ export const tokenComponentColor = {
             dark1: "rgba(120, 169, 255, 0.32)",
             dark2: "rgba(120, 169, 255, 0.32)",
             dark3: "rgba(120, 169, 255, 0.32)",
-            dark4: "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",
+            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)",
@@ -352,97 +326,97 @@ export const tokenComponentColor = {
             dark1: "rgba(255, 155, 84, 0.32)",
             dark2: "rgba(255, 155, 84, 0.32)",
             dark3: "rgba(255, 155, 84, 0.32)",
-            dark4: "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",
+            light1: "--orange_40",
+            light2: "--orange_40",
+            dark1: "--orange_30",
+            dark2: "--orange_30",
+            dark3: "--orange_30",
+            dark4: "--orange_30",
         },
     },
     chip: {
         chip_primary_bg: {
-            light1: "--lunitTeal-20",
-            light2: "--lunitTeal-20",
-            dark1: "--lunitTeal-60",
-            dark2: "--lunitTeal-60",
-            dark3: "--lunitTeal-60",
-            dark4: "--lunitTeal-60",
+            light1: "--lunit_teal_20",
+            light2: "--lunit_teal_20",
+            dark1: "--lunit_teal_60",
+            dark2: "--lunit_teal_60",
+            dark3: "--lunit_teal_60",
+            dark4: "--lunit_teal_60",
         },
         chip_primary_text: {
-            light1: "--lunitTeal-50",
-            light2: "--lunitTeal-50",
-            dark1: "--lunitTeal-40",
-            dark2: "--lunitTeal-40",
-            dark3: "--lunitTeal-40",
-            dark4: "--lunitTeal-40",
+            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",
+            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",
+            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",
+            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",
+            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",
+            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",
+            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",
+            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",
+            light1: "--green_40",
+            light2: "--green_40",
+            dark1: "--green_30",
+            dark2: "--green_30",
+            dark3: "--green_30",
+            dark4: "--green_30",
         },
     },
 };