design: 팔레트 색상 변경

Kernel360 · Jan 17, 2024 · c23ad25 · c23ad25
1 parent b8d17d6
commit c23ad25
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 5 deletions.
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -8,6 +8,9 @@
   --gray-300: #72777A;
   --gray-400: #404446;
   --tertiary: #7A7A7A;
+  --tertiary-100: #EAEAEA;
+  --tertiary-200: #F6F6F6;
+  --tertiary-400: #7C7A7A;
   --black: #090A0A;
   --white: #FFF;
   --white-100: #F3F5F8;

diff --git a/src/components/shared/dropdown/Dropdown.module.scss b/src/components/shared/dropdown/Dropdown.module.scss
@@ -14,7 +14,7 @@
       width: 80px;
       padding: 4px 4px 4px 8px;
       border-radius: 8px;
-      background-color: var(--tertiary-400);
+      background-color: var(--tertiary-200);
     }
   }
 
@@ -27,8 +27,8 @@
     border-radius: 8px;
 
     &.favorite {
-      background-color: var(--tertiary-400);
-      color: var(--tertiary-200);
+      background-color: var(--tertiary-200);
+      color: var(--tertiary-400);
     }
 
     .item {

diff --git a/src/components/shared/dropdown/Dropdown.tsx b/src/components/shared/dropdown/Dropdown.tsx
@@ -46,8 +46,8 @@ const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(({
   return (
     <div className={cx('container', { [type]: true })} ref={containerRef}>
       <button onClick={openDropdownMenu} className={cx('selectedValue', { [type]: true })}>
-        <Text typography="t6" color="tertiary200">{label}</Text>
-        <Expand isRotate={isOpen} color="tertiary200" />
+        <Text typography="t6" color="tertiary400">{label}</Text>
+        <Expand isRotate={isOpen} color="tertiary400" />
       </button>
       {isOpen && (
         <ul className={cx('menu', { [type]: true })}>

diff --git a/src/styles/colorPalette.ts b/src/styles/colorPalette.ts
@@ -8,6 +8,9 @@ export const colors = {
   gray300: 'var(--gray-300)',
   gray400: 'var(--gray-400)',
   tertiary: 'var(--tertiary)',
+  tertiary100: 'var(--tertiary-100)',
+  tertiary200: 'var(--tertiary-200)',
+  tertiary400: 'var(--tertiary-400)',
   black: 'var(--black)',
   white: 'var(--white)',
   white100: 'var(--white-100)',