[Feat] 아이콘, 색상 변경 사항 반영 (#72)

* feat(packages/theme): 아이콘 변경 사항 반영 * fix(packages/ui): 누락된 아이콘 추가
YAPP-Github · Jan 18, 2025 · 5639eac · 5639eac
1 parent 7e20960
commit 5639eac
Show file tree

Hide file tree

Showing 11 changed files with 43 additions and 20 deletions.
diff --git a/packages/theme/src/themes/dark.ts b/packages/theme/src/themes/dark.ts
@@ -5,7 +5,7 @@ export const darkTheme: ThemeContract = {
   colors: {
     primary: tokens.colors.green200,
     primary400to200: tokens.colors.green200,
-    primaryHover: tokens.colors.green100,
+    primaryHover: tokens.colors.green200, // TODO
 
     warning: tokens.colors.warning300,
 

diff --git a/packages/theme/src/themes/light.ts b/packages/theme/src/themes/light.ts
@@ -5,7 +5,7 @@ export const lightTheme: ThemeContract = {
   colors: {
     primary: tokens.colors.green200, // TODO: 삭제 예정
     primary400to200: tokens.colors.green400, // TODO: 삭제 예정
-    primaryHover: tokens.colors.green300, // TODO: 삭제 예정
+    primaryHover: tokens.colors.green200, // TODO: 삭제 예정
 
     warning: tokens.colors.warning500,
 

diff --git a/packages/theme/src/tokens/colors.ts b/packages/theme/src/tokens/colors.ts
@@ -1,13 +1,8 @@
 export const colors = {
-  green100: '#F1FFB5', // TODO: 삭제 예정
-  green200: '#E6FF79', // TODO: 삭제 예정
-  green300: '#D0F141', // TODO: 삭제 예정
-  green400: '#D2F634', // TODO: 삭제 예정
-
   primary500: '#7081F4',
   primary600: '#5266EC',
   primary700: '#3348D6',
-  primary800: '#2035BC',
+  primary800: '#2035BC', // TODO 삭제 예정
 
   warning300: '#FF724E',
   warning500: '#FF3300',
@@ -16,6 +11,7 @@ export const colors = {
 
   pink200: '#FFD6D6',
   pink400: '#EAAEAE',
+  pink600: '#BF5E5E',
   pink800: '#A63535',
 
   orange200: '#FFEAD9',
@@ -26,12 +22,22 @@ export const colors = {
   blue400: '#7698E2',
   blue800: '#153C66',
 
+  purple200: '#E5CEFF',
+  purple400: '#B68AE7',
+  purple600: '#9365C5',
+  purple800: '#412274',
+
   violet0: '#F2F3FF',
   violet100: '#DFE1FE',
   violet200: '#B7B4FF',
   violet400: '#817ED5',
   violet800: '#4A46A3',
 
+  green200: '#D1F9DF',
+  green400: '#76CE95',
+  green600: '#337B6E',
+  green800: '#224C38',
+
   grey0: '#FFFFFF',
   grey25: '#F7F9FB',
   grey50: '#EAEFF4',

diff --git a/packages/ui/src/assets/icons/IconArrowFillBottom.svg b/packages/ui/src/assets/icons/IconArrowFillBottom.svg
diff --git a/packages/ui/src/assets/icons/IconArrowFillTop.svg b/packages/ui/src/assets/icons/IconArrowFillTop.svg
diff --git a/packages/ui/src/assets/icons/IconCheck.svg b/packages/ui/src/assets/icons/IconCheck.svg
diff --git a/packages/ui/src/assets/icons/IconCheckbox.svg b/packages/ui/src/assets/icons/IconCheckbox.svg
diff --git a/packages/ui/src/assets/icons/IconTwinkle.svg b/packages/ui/src/assets/icons/IconTwinkle.svg
diff --git a/packages/ui/src/assets/icons/IconUnSelectedCheckbox.svg b/packages/ui/src/assets/icons/IconUnSelectedCheckbox.svg
diff --git a/packages/ui/src/assets/icons/_IconX.svg b/packages/ui/src/assets/icons/_IconX.svg
diff --git a/packages/ui/src/components/Icon/assets.ts b/packages/ui/src/components/Icon/assets.ts
@@ -1,11 +1,14 @@
 import IconArrowBottom from '@/assets/icons/IconArrowBottom.svg';
+import IconArrowFillBottom from '@/assets/icons/IconArrowFillBottom.svg';
+import IconArrowFillTop from '@/assets/icons/IconArrowFillTop.svg';
 import IconArrowLeft from '@/assets/icons/IconArrowLeft.svg';
 import IconArrowRight from '@/assets/icons/IconArrowRight.svg';
 import IconArrowTop from '@/assets/icons/IconArrowTop.svg';
 import IconCalendar from '@/assets/icons/IconCalendar.svg';
 import IconChat from '@/assets/icons/IconChat.svg';
 import IconCheck from '@/assets/icons/IconCheck.svg';
 import IconCheckCalendar from '@/assets/icons/IconCheckCalendar.svg';
+import IconCheckbox from '@/assets/icons/IconCheckbox.svg';
 import IconDocument from '@/assets/icons/IconDocument.svg';
 import IconLineThree from '@/assets/icons/IconLineThree.svg';
 import IconNotice from '@/assets/icons/IconNotice.svg';
@@ -19,20 +22,23 @@ import IconSmile from '@/assets/icons/IconSmile.svg';
 import IconStack from '@/assets/icons/IconStack.svg';
 import IconStar from '@/assets/icons/IconStar.svg';
 import IconTwinkle from '@/assets/icons/IconTwinkle.svg';
+import IconUnSelectedCheckbox from '@/assets/icons/IconUnSelectedCheckbox.svg';
 import IconX from '@/assets/icons/IconX.svg';
 import IconXCircle from '@/assets/icons/IconXCircle.svg';
-import IconCheckbox from '@/assets/icons/IconCheckbox.svg';
-import IconUnSelectedCheckbox from '@/assets/icons/IconUnSelectedCheckbox.svg';
+import _IconX from '@/assets/icons/_IconX.svg';
 
 export const icons = {
   arrowBottom: IconArrowBottom,
+  arrowFillBottom: IconArrowFillBottom,
+  arrowFillTop: IconArrowFillTop,
   arrowLeft: IconArrowLeft,
   arrowRight: IconArrowRight,
   arrowTop: IconArrowTop,
   calendar: IconCalendar,
   chat: IconChat,
   check: IconCheck,
   checkCalendar: IconCheckCalendar,
+  checkbox: IconCheckbox,
   document: IconDocument,
   lineThree: IconLineThree,
   notice: IconNotice,
@@ -46,8 +52,8 @@ export const icons = {
   stack: IconStack,
   star: IconStar,
   twinkle: IconTwinkle,
+  unSelectedCheckbox: IconUnSelectedCheckbox,
   x: IconX,
   xCircle: IconXCircle,
-  checkbox: IconCheckbox,
-  unSelectedCheckbox: IconUnSelectedCheckbox,
+  iconX: _IconX,
 };