💄 Primary 색에 맞춰 button 스타일 수정

woowacourse-teams · Oct 29, 2024 · 1ab5e0e · 1ab5e0e
1 parent 51b9aaa
commit 1ab5e0e
Showing 1 changed file with 8 additions and 8 deletions.
diff --git a/frontend/src/components/_common/Button/Button.styles.ts b/frontend/src/components/_common/Button/Button.styles.ts
@@ -43,11 +43,11 @@ export const Button = styled.button<ButtonStyleProp>`
   justify-content: center;
   align-items: center;
 
-  border: 1px solid ${({ theme, $color }) => theme.color[$color][500]};
+  border: 1px solid ${({ theme, $color }) => theme.color[$color][600]};
   border-radius: ${({ $rounded }) => ($rounded ? '50rem' : '1rem')};
 
-  background-color: ${({ $filled, theme, $color }) => ($filled ? theme.color[$color][500] : theme.color.black[100])};
-  color: ${({ $filled, theme, $color }) => ($filled ? theme.color.black[100] : theme.color[$color][500])};
+  background-color: ${({ $filled, theme, $color }) => ($filled ? theme.color[$color][600] : theme.color.black[100])};
+  color: ${({ $filled, theme, $color }) => ($filled ? theme.color.black[100] : theme.color[$color][600])};
 
   transition: all 0.2s;
 
@@ -56,17 +56,17 @@ export const Button = styled.button<ButtonStyleProp>`
   &:hover {
     border: 1px solid ${({ theme, $color }) => theme.color[$color][600]};
 
-    background-color: ${({ $filled, theme, $color }) => ($filled ? theme.color[$color][600] : theme.color.black[100])};
-    color: ${({ $filled, theme, $color }) => ($filled ? theme.color.black[100] : theme.color[$color][600])};
+    background-color: ${({ $filled, theme, $color }) => ($filled ? theme.color[$color][700] : theme.color.black[100])};
+    color: ${({ $filled, theme, $color }) => ($filled ? theme.color.black[100] : theme.color[$color][700])};
 
     transform: ${({ $animation }) => $animation && 'scale(1.01)'};
   }
 
   &:active {
-    border: 1px solid ${({ theme, $color }) => theme.color[$color][700]};
+    border: 1px solid ${({ theme, $color }) => theme.color[$color][800]};
 
-    background-color: ${({ $filled, theme, $color }) => ($filled ? theme.color[$color][700] : theme.color.black[100])};
-    color: ${({ $filled, theme, $color }) => ($filled ? theme.color.black[100] : theme.color[$color][700])};
+    background-color: ${({ $filled, theme, $color }) => ($filled ? theme.color[$color][800] : theme.color.black[100])};
+    color: ${({ $filled, theme, $color }) => ($filled ? theme.color.black[100] : theme.color[$color][800])};
 
     transform: ${($animation) => $animation && 'scale(1.02)'};
   }