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

package/src/foundation/colors/index.ts

@@ -0,0 +1,256 @@
+// Main module for Foundation > Colors
+
+import { PaletteOptions, PaletteColor } from "@mui/material/styles";
+import * as base from "./base";
+import * as token from "./token";
+import { ColorToken } from "./types";
+import { ColorTokenValueBySurface } from "./token/types";
+
+export type BaseColor = Record<keyof typeof base.blue, PaletteColor>;
+export type GreyColor = Record<keyof typeof base.grey, PaletteColor>;
+
+declare module "@mui/material/styles/createPalette" {
+  interface PaletteOptions {
+    lunit?: {
+      grey: GreyColor;
+      blue: BaseColor;
+      green: BaseColor;
+      lunit_green: BaseColor;
+      lunit_teal: BaseColor;
+      magenta: BaseColor;
+      orange: BaseColor;
+      red: BaseColor;
+      yellow: BaseColor;
+    };
+    token?: ColorToken;
+  }
+
+  interface Palette {
+    lunit: {
+      grey: GreyColor;
+      blue: BaseColor;
+      green: BaseColor;
+      lunit_green: BaseColor;
+      lunit_teal: BaseColor;
+      magenta: BaseColor;
+      orange: BaseColor;
+      red: BaseColor;
+      yellow: BaseColor;
+    };
+    token: ColorToken;
+  }
+}
+
+type ColorKey = keyof typeof base;
+
+const createCSSVariables = () => {
+  const cssVars: { [name: string]: string } = {};
+  for (let color in base) {
+    const baseColors = base[color as ColorKey];
+    for (let key in baseColors) {
+      if (baseColors.hasOwnProperty(key)) {
+        const varName = `--${color}_${key}`;
+        cssVars[varName] = baseColors[Number(key) as keyof typeof baseColors];
+      }
+    }
+  }
+  return cssVars;
+};
+
+const createTokenColorVariables = (surface: keyof ColorTokenValueBySurface) => {
+  const cssVars: { [name: string]: string } = {};
+
+  for (let coreToken in token.tokenCoreColor) {
+    if (token.tokenCoreColor.hasOwnProperty(coreToken)) {
+      const varName = `--${coreToken}`;
+      const tokenValue = token.tokenCoreColor[coreToken][surface];
+      // 현재 tokenValue는 cssVariable과 rgba 값 2종류가 존재함. 이 종류에 따라서 var 사용 여부를 결정해주기 위해 if문을 추가하였으나,
+      // 차후 피그마에서 json 파일을 넘겨준 것을 스크립트화하는 작업이 끝나면 if문 자체가 사라질 예정.
+      if (tokenValue.charAt(0) === "-") {
+        cssVars[varName] = `var(${tokenValue})`;
+      } else {
+        cssVars[varName] = `${tokenValue}`;
+      }
+    }
+  }
+
+  for (let componentGroup in token.tokenComponentColor) {
+    if (token.tokenComponentColor.hasOwnProperty(componentGroup)) {
+      const componentTokens = token.tokenComponentColor[componentGroup];
+
+      let tokenName: keyof typeof componentTokens;
+      for (tokenName in componentTokens) {
+        if (componentTokens.hasOwnProperty(tokenName)) {
+          const varName = `--${tokenName}`;
+          const tokenValue = componentTokens[tokenName][surface];
+          if (tokenValue.charAt(0) === "-") {
+            cssVars[varName] = `var(${tokenValue})`;
+          } else {
+            cssVars[varName] = `${tokenValue}`;
+          }
+        }
+      }
+    }
+  }
+  return cssVars;
+};
+
+export const createColorCssBaseline = () => {
+  return {
+    ":root": {
+      ...createCSSVariables(),
+      ...createTokenColorVariables("dark1"),
+    },
+    ".light1": {
+      ...createTokenColorVariables("light1"),
+    },
+    ".light2": {
+      ...createTokenColorVariables("light2"),
+    },
+    ".dark1": {
+      ...createTokenColorVariables("dark1"),
+    },
+    ".dark2": {
+      ...createTokenColorVariables("dark2"),
+    },
+    ".dark3": {
+      ...createTokenColorVariables("dark3"),
+    },
+    ".dark4": {
+      ...createTokenColorVariables("dark4"),
+    },
+  };
+};
+
+// TODO: TextColors 삭제하고 관련된 설정 수정하기
+const lunitColors: PaletteOptions["lunit"] = ((): PaletteOptions["lunit"] => {
+  const ret: any = {};
+  for (const colorKey in base) {
+    if (base[`${colorKey}Text` as ColorKey]) {
+      const baseColors = base[colorKey as ColorKey];
+      const textColors = base[`${colorKey}Text` as ColorKey];
+      ret[colorKey] = {};
+      for (const key in baseColors) {
+        if (baseColors.hasOwnProperty(key)) {
+          const color = baseColors[Number(key) as keyof typeof baseColors];
+          const textColor = textColors[Number(key) as keyof typeof textColors];
+          ret[colorKey][Number(key)] = {
+            light: color,
+            main: color,
+            dark: color,
+            contrastText: textColor,
+          };
+        }
+      }
+    }
+  }
+  return ret;
+})();
+
+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: {
+      bg_01: "var(--bg_01)",
+      bg_02: "var(--bg_02)",
+      bg_03: "var(--bg_03)",
+      text_primary: "var(--text_primary)",
+      text_normal: "var(--text_normal)",
+      text_medium: "var(--text_medium)",
+      text_light: "var(--text_light)",
+      text_error: "var(--text_error)",
+      text_success: "var(--text_success)",
+      text_warning: "var(--text_warning)",
+      text_info: "var(--text_info)",
+      link_primary: "var(--link_primary)",
+      link_hover: "var(--link_hover)",
+      link_visited: "var(--link_visited)",
+      icon_error_02: "var(--icon_error_02)",
+      icon_success_02: "var(--icon_success_02)",
+      icon_warning_02: "var(--icon_warning_02)",
+      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)",
+      shadow_04: "var(--shadow_04)",
+    },
+    component: {
+      btn_contained_primary_bg: "var(--btn_contained_primary_bg)",
+      btn_contained_primary_text: "var(--btn_contained_primary_text)",
+      btn_contained_secondary_bg: "var(--btn_contained_secondary_bg)",
+      btn_contained_secondary_text: "var(--btn_contained_secondary_text)",
+      btn_contained_error_bg: "var(--btn_contained_error_bg)",
+      btn_contained_error_text: "var(--btn_contained_error_text)",
+      btn_outlined_primary_border: "var(--btn_outlined_primary_border)",
+      btn_outlined_primary_text: "var(--btn_outlined_primary_text)",
+      btn_ghost_primary_text: "var(--btn_ghost_primary_text)",
+      btn_ghost_secondary_text: "var(--btn_ghost_secondary_text)",
+      btn_ghost_error_text: "var(--btn_ghost_error_text)",
+      btn_selected_primary_bg: "var(--btn_selected_primary_bg)",
+      btn_selected_primary_text: "var(--btn_selected_primary_text)",
+      btn_selected_secondary_bg: "var(--btn_selected_secondary_bg)",
+      btn_selected_secondary_text: "var(--btn_selected_secondary_text)",
+      selectcontrol_on: "var(--selectcontrol_on)",
+      selectcontrol_off: "var(--selectcontrol_off)",
+      selectcontrol_handler: "var(--selectcontrol_handler)",
+      selectcontrol_handler_shadow: "var(--selectcontrol_handler_shadow)",
+      textfield_bg: "var(--textfield_bg)",
+      textfield_border_error: "var(--textfield_border_error)",
+      dropdown_divider_border: "var(--dropdown_divider_border)",
+      datatable_border_01: "var(--datatable_border_01)",
+      datatable_border_02: "var(--datatable_border_02)",
+      datatable_zebra: "var(--datatable_zebra)",
+      scrollbars_bg: "var(--scrollbars_bg)",
+      scrollbars_hover: "var(--scrollbars_hover)",
+      scrollbars_pressed: "var(--scrollbars_pressed)",
+      modal_overlay: "var(--modal_overlay)",
+      tooltip_bg: "var(--tooltip_bg)",
+      tooltip_text_normal: "var(--tooltip_text_normal)",
+      tooltip_text_medium: "var(--tooltip_text_medium)",
+      alert_error_bg: "var(--alert_error_bg)",
+      alert_error_border: "var(--alert_error_border)",
+      alert_success_bg: "var(--alert_success_bg)",
+      alert_success_border: "var(--alert_success_border)",
+      alert_info_bg: "var(--alert_info_bg)",
+      alert_info_border: "var(--alert_info_border)",
+      alert_warning_bg: "var(--alert_warning_bg)",
+      alert_warning_border: "var(--alert_warning_border)",
+      chip_primary_bg: "var(--chip_primary_bg)",
+      chip_primary_text: "var(--chip_primary_text)",
+      chip_secondary_bg: "var(--chip_secondary_bg)",
+      chip_secondary_text: "var(--chip_secondary_text)",
+      chip_error_bg: "var(--chip_error_bg)",
+      chip_error_text: "var(--chip_error_text)",
+      chip_warning_bg: "var(--chip_warning_bg)",
+      chip_warning_text: "var(--chip_warning_text)",
+      chip_success_bg: "var(--chip_success_bg)",
+      chip_success_text: "var(--chip_success_text)",
+    },
+  },
+};
+
+export { base };
+
+export default paletteOptions;

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

@@ -0,0 +1,430 @@
+import { ColorTokenValueBySurface } from "./types";
+
+export interface TokenComponentColorValue {
+  [component: string]: {
+    [token: string]: ColorTokenValueBySurface;
+  };
+}
+
+export const tokenComponentColor: TokenComponentColorValue = {
+  btn: {
+    btn_contained_primary_bg: {
+      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",
+    },
+    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_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",
+    },
+    btn_outlined_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_outlined_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",
+    },
+    btn_ghost_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",
+    },
+    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: "--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",
+    },
+    btn_selected_secondary_text: {
+      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: "--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",
+    },
+    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_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",
+    },
+  },
+  dropdown: {
+    dropdown_divider_border: {
+      light1: "--grey_15",
+      light2: "--grey_15",
+      dark1: "--grey_60",
+      dark2: "--grey_60",
+      dark3: "--grey_60",
+      dark4: "--grey_60",
+    },
+  },
+  dataTable: {
+    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: "--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: "--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",
+    },
+  },
+};