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

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

@@ -0,0 +1,456 @@
+import { ColorTokenValueBySurface } from "./types";
+
+export interface TokenComponentColorValue {
+  [component: string]: {
+    [token: string]: ColorTokenValueBySurface;
+  };
+}
+
+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",
+    },
+    btn_contained_primary_text: {
+      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",
+    },
+    btn_contained_secondary_text: {
+      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",
+    },
+    btn_contained_error_text: {
+      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",
+    },
+    btn_outlined_primary_text: {
+      light1: "--lunitTeal-50",
+      light2: "--lunitTeal-50",
+      dark1: "--lunitTeal-40",
+      dark2: "--lunitTeal-40",
+      dark3: "--lunitTeal-40",
+      dark4: "--lunitTeal-40",
+    },
+    btn_ghost_primary_text: {
+      light1: "--lunitTeal-50",
+      light2: "--lunitTeal-50",
+      dark1: "--lunitTeal-40",
+      dark2: "--lunitTeal-40",
+      dark3: "--lunitTeal-40",
+      dark4: "--lunitTeal-40",
+    },
+    btn_ghost_secondary_text: {
+      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",
+    },
+    btn_selected_primary_bg: {
+      light1: "--lunitTeal-80",
+      light2: "--lunitTeal-80",
+      dark1: "--lunitTeal-10",
+      dark2: "--lunitTeal-10",
+      dark3: "--lunitTeal-10",
+      dark4: "--lunitTeal-10",
+    },
+    btn_selected_primary_text: {
+      light1: "--lunitTeal-10",
+      light2: "--lunitTeal-10",
+      dark1: "--lunitTeal-80",
+      dark2: "--lunitTeal-80",
+      dark3: "--lunitTeal-80",
+      dark4: "--lunitTeal-80",
+    },
+    btn_selected_secondary_bg: {
+      // TODO: 피그마에 작성된 코드와 색상의 값이 달라 확인중
+      light1: "--lunitTeal-10",
+      light2: "--lunitTeal-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",
+    },
+  },
+  selectControl: {
+    selectcontrol_on: {
+      light1: "--lunitTeal-40",
+      light2: "--lunitTeal-40",
+      dark1: "--lunitTeal-40",
+      dark2: "--lunitTeal-40",
+      dark3: "--lunitTeal-40",
+      dark4: "--lunitTeal-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: {
+    textfield_bg: {
+      light1: "--grey-10",
+      light2: "--grey-00",
+      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",
+    },
+  },
+  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",
+    },
+  },
+  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",
+    },
+    datatable_border_02: {
+      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%",
+    },
+  },
+  scrollbars: {
+    scrollbars_bg: {
+      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",
+    },
+    scrollbars_pressed: {
+      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%",
+    },
+  },
+  tooltip: {
+    tooltip_bg: {
+      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",
+    },
+    tooltip_text_medium: {
+      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%",
+    },
+    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: {
+    chip_primary_bg: {
+      light1: "--lunitTeal-20",
+      light2: "--lunitTeal-20",
+      dark1: "--lunitTeal-60",
+      dark2: "--lunitTeal-60",
+      dark3: "--lunitTeal-60",
+      dark4: "--lunitTeal-60",
+    },
+    chip_primary_text: {
+      light1: "--lunitTeal-50",
+      light2: "--lunitTeal-50",
+      dark1: "--lunitTeal-40",
+      dark2: "--lunitTeal-40",
+      dark3: "--lunitTeal-40",
+      dark4: "--lunitTeal-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

@@ -0,0 +1,204 @@
+import { ColorTokenValueBySurface } from "./types";
+
+export interface TokenCoreColorValue {
+  [token: string]: ColorTokenValueBySurface;
+}
+
+export const tokenCoreColor: TokenCoreColorValue = {
+  bg_01: {
+    light1: "--grey-0",
+    light2: "--grey-10",
+    dark1: "--grey-90",
+    dark2: "--grey-85",
+    dark3: "--grey-80",
+    dark4: "--grey-70",
+  },
+  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",
+  },
+  text_primary: {
+    light1: "--lunitTeal-50",
+    light2: "--lunitTeal-50",
+    dark1: "--lunitTeal-40",
+    dark2: "--lunitTeal-40",
+    dark3: "--lunitTeal-40",
+    dark4: "--lunitTeal-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",
+  },
+  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",
+  },
+  text_success: {
+    // TODO: sucess -> success 로 바뀌었으니 코드 내 사용되는 부분 확인해서 업데이트. 개발자들에게도 공지할것.
+    light1: "--green-40",
+    light2: "--green-40",
+    dark1: "--green-40",
+    dark2: "--green-40",
+    dark3: "--green-30",
+    dark4: "--green-30",
+  },
+  text_warning: {
+    light1: "--orange-40",
+    light2: "--orange-40",
+    dark1: "--orange-40",
+    dark2: "--orange-40",
+    dark3: "--orange-30",
+    dark4: "--orange-30",
+  },
+  text_info: {
+    light1: "--blue-40",
+    light2: "--blue-40",
+    dark1: "--blue-40",
+    dark2: "--blue-40",
+    dark3: "--blue-30",
+    dark4: "--blue-30",
+  },
+  link_primary: {
+    light1: "--blue-40",
+    light2: "--blue-40",
+    dark1: "--blue-40",
+    dark2: "--blue-40",
+    dark3: "--blue-30",
+    dark4: "--blue-30",
+  },
+  link_hover: {
+    light1: "--blue-50",
+    light2: "--blue-50",
+    dark1: "--blue-50",
+    dark2: "--blue-50",
+    dark3: "--blue-40",
+    dark4: "--blue-40",
+  },
+  link_visited: {
+    light1: "--purple-50",
+    light2: "--purple-50",
+    dark1: "--purple-50",
+    dark2: "--purple-50",
+    dark3: "--purple-40",
+    dark4: "--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: {
+    // TODO: sucess -> success 로 바뀌었으니 코드 내 사용되는 부분 확인해서 업데이트. 개발자들에게도 공지할것.
+    // TODO: 피그마에 오타 수정 요청한 상태. 확인되면 todo 지우기
+    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.06)", // grey_100 6% // TODO: 10%로 수정 예정이라고 하니 다시 확인하기
+    light2: "rgba(0, 0, 0, 0.06)", // grey_100 6%
+    dark1: "rgba(255, 255, 255, 0.06)", // grey_00 6%
+    dark2: "rgba(255, 255, 255, 0.06)", // grey_00 6%
+    dark3: "rgba(255, 255, 255, 0.06)", // grey_00 6%
+    dark4: "rgba(255, 255, 255, 0.06)", // grey_00 6%
+  },
+  focused: {
+    light1: "--lunitTeal-40",
+    light2: "--lunitTeal-40",
+    dark1: "--lunitTeal-40",
+    dark2: "--lunitTeal-40",
+    dark3: "--lunitTeal-40",
+    dark4: "--lunitTeal-40",
+  },
+  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%",
+  },
+  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%",
+  },
+  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%",
+  },
+  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%",
+  },
+};

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

@@ -0,0 +1,2 @@
+export * from "./component";
+export * from "./core";

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

@@ -0,0 +1,8 @@
+export interface ColorTokenValueBySurface {
+  light1: string;
+  light2: string;
+  dark1: string;
+  dark2: string;
+  dark3: string;
+  dark4: string;
+}