feat: add new color token

lunit-io · Jun 10, 2024 · 7e49e75 · 7e49e75
1 parent 056e497
commit 7e49e75
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 0 deletions.
diff --git a/packages/design-system/src/foundation/colors/index.ts b/packages/design-system/src/foundation/colors/index.ts
@@ -199,6 +199,8 @@ const paletteOptions = {
       shadow_02: "var(--shadow_02)",
       shadow_03: "var(--shadow_03)",
       shadow_04: "var(--shadow_04)",
+      border_light: "var(--border_light)",
+      border_medium: "var(--border_medium)",
     },
     component: {
       btn_primary_bg: "var(--btn_primary_bg)",
@@ -214,6 +216,8 @@ const paletteOptions = {
       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)",
+      btn_selected_tertiary_bg: "var(--btn_selected_tertiary_bg)",
+      btn_selected_tertiary_text: "var(--btn_selected_tertiary_text)",
       selectcontrol_on: "var(--selectcontrol_on)",
       selectcontrol_off: "var(--selectcontrol_off)",
       selectcontrol_handler: "var(--selectcontrol_handler)",

diff --git a/packages/design-system/src/foundation/colors/token/component.ts b/packages/design-system/src/foundation/colors/token/component.ts
@@ -86,6 +86,18 @@ export const tokenComponentColor: TokenComponentColorValue = {
       dark1: "--lunit_teal_30",
       dark2: "--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: {
     selectcontrol_on: {

diff --git a/packages/design-system/src/foundation/colors/token/core.ts b/packages/design-system/src/foundation/colors/token/core.ts
@@ -162,4 +162,16 @@ export const tokenCoreColor: TokenCoreColorValue = {
     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%",
+  },
 };
diff --git a/packages/design-system/src/foundation/colors/types.ts b/packages/design-system/src/foundation/colors/types.ts
@@ -26,6 +26,8 @@ export interface ColorToken {
     shadow_02: string;
     shadow_03: string;
     shadow_04: string;
+    border_light: string;
+    border_medium: string;
   };
   component: {
     btn_primary_bg: string;
@@ -41,6 +43,8 @@ export interface ColorToken {
     btn_selected_primary_text: string;
     btn_selected_secondary_bg: string;
     btn_selected_secondary_text: string;
+    btn_selected_tertiary_bg: string;
+    btn_selected_tertiary_text: string;
     selectcontrol_on: string;
     selectcontrol_off: string;
     selectcontrol_handler: string;