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

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

@@ -9,448 +9,422 @@ export interface TokenComponentColorValue {
 export const tokenComponentColor: TokenComponentColorValue = {
   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)", // "--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%",
+      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: {
     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)", // "--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%",
+      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: {
     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: {
     modal_overlay: {
-      light1: "rgba(17, 17, 19, 0.7)", // "--grey-95 70%",
-      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%",
+      light1: "rgba(17, 17, 19, 0.7)", // "--grey_95 70%",
+      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: {
     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: {
     alert_error_bg: {
-      light1: "rgba(250, 77, 86, 0.16)", // "--red-40 16%",
-      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%",
+      light1: "rgba(250, 77, 86, 0.16)", // "--red_40 16%",
+      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",
+      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%",
+      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",
+      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%",
+      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",
+      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%",
+      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",
+      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",
     },
   },
 };