[FE] 모모 디자인 토큰 컬러 값 수정 (#237)

chore: 디자인 토큰 컬러 값 수정
woowacourse-teams · Aug 15, 2024 · c9e52b1 · c9e52b1
1 parent b585fa4
commit c9e52b1
Showing 1 changed file with 49 additions and 24 deletions.
diff --git a/frontend/src/styles/tokens/colors.ts b/frontend/src/styles/tokens/colors.ts
@@ -1,19 +1,29 @@
 const PRIMITIVE_COLORS = {
   black: '#000000',
   white: '#ffffff',
-  // 현재 달력에서 공휴일 색을 표시하기 위해서 빨간색을 사용하고 있는데, 빨간색도 palette를 사용해야 할지는 미정(@해리)
-  red: '#ff0000',
-
   pink: {
-    100: '#FFEBE8',
-    200: '#FFD4D1',
-    300: '#FFBABC',
-    400: '#FFA9B4',
-    500: '#FF8DA6',
-    600: '#DB678B',
-    700: '#B74775',
-    800: '#932C61',
-    900: '#7A1B54',
+    100: '#FFEBEF',
+    200: '#FFD6E0',
+    300: '#FFC2D0',
+    400: '#FFADC0',
+    500: '#FF8BA7',
+    600: '#FF85A1',
+    700: '#FF7092',
+    800: '#FF5C82',
+    900: '#FF4772',
+    1000: '#FF3363',
+  },
+  green: {
+    100: '#C3F0CA',
+    200: '#BEEFC5',
+    300: '#ADEBB7',
+    400: '#9DE7A8',
+    500: '#8DE29A',
+    600: '#7CDE8B',
+    700: '#6CDA7D',
+    800: '#5CD66E',
+    900: '#4BD260',
+    1000: '#3BCE51',
   },
   grey: {
     100: '#f4f4f5',
@@ -26,12 +36,38 @@ const PRIMITIVE_COLORS = {
     800: '#27272a',
     900: '#18181b',
   },
+  blue: { 100: '#9BD3FD', 200: '#72C1FD', 300: '#3DA9FC', 400: '#229DFC', 500: '#048AF1' },
+  red: { 100: '#F58E8E', 200: '#F26969', 300: '#EF4545', 400: '#EB1E1E', 500: '#CE1212' },
 } as const;
 
 export const SEMANTIC_COLORS = {
   white: PRIMITIVE_COLORS.white,
   black: PRIMITIVE_COLORS.black,
   primary: PRIMITIVE_COLORS.pink['500'],
+  pink: {
+    lightest: PRIMITIVE_COLORS.pink['100'],
+    light: PRIMITIVE_COLORS.pink['200'],
+    mediumLight: PRIMITIVE_COLORS.pink['300'],
+    medium: PRIMITIVE_COLORS.pink['400'],
+    mediumDark: PRIMITIVE_COLORS.pink['500'],
+    dark: PRIMITIVE_COLORS.pink['600'],
+    darker: PRIMITIVE_COLORS.pink['700'],
+    darkest: PRIMITIVE_COLORS.pink['800'],
+    deep: PRIMITIVE_COLORS.pink['900'],
+    deepDark: PRIMITIVE_COLORS.pink['1000'],
+  },
+  green: {
+    lightest: PRIMITIVE_COLORS.green['100'],
+    light: PRIMITIVE_COLORS.green['200'],
+    mediumLight: PRIMITIVE_COLORS.green['300'],
+    medium: PRIMITIVE_COLORS.green['400'],
+    mediumDark: PRIMITIVE_COLORS.green['500'],
+    dark: PRIMITIVE_COLORS.green['600'],
+    darker: PRIMITIVE_COLORS.green['700'],
+    darkest: PRIMITIVE_COLORS.green['800'],
+    deep: PRIMITIVE_COLORS.green['900'],
+    deepDark: PRIMITIVE_COLORS.green['1000'],
+  },
   calendar: {
     color: {
       saturday: '#8c9eff',
@@ -44,7 +80,6 @@ export const SEMANTIC_COLORS = {
       selected: PRIMITIVE_COLORS.pink['200'],
     },
   },
-  holiday: PRIMITIVE_COLORS.red,
   grey: {
     primary: PRIMITIVE_COLORS.grey['200'],
     dark: PRIMITIVE_COLORS.grey['500'],
@@ -54,16 +89,6 @@ export const SEMANTIC_COLORS = {
       light: PRIMITIVE_COLORS.grey['200'],
       dark: PRIMITIVE_COLORS.grey['500'],
     },
-    selected: {
-      light: PRIMITIVE_COLORS.pink['100'],
-      mediumLight: PRIMITIVE_COLORS.pink['200'],
-      medium: PRIMITIVE_COLORS.pink['300'],
-      mediumDark: PRIMITIVE_COLORS.pink['400'],
-      dark: PRIMITIVE_COLORS.pink['500'],
-      darker: PRIMITIVE_COLORS.pink['600'],
-      darkest: PRIMITIVE_COLORS.pink['700'],
-      deep: PRIMITIVE_COLORS.pink['800'],
-      deepDark: PRIMITIVE_COLORS.pink['900'],
-    },
+    selected: {},
   },
 } as const;