💄 변경된 색 상수에 맞춰 styles 수정

woowacourse-teams · Oct 29, 2024 · 51b9aaa · 51b9aaa
1 parent f1590b3
commit 51b9aaa
Show file tree

Hide file tree

Showing 78 changed files with 278 additions and 274 deletions.
diff --git a/frontend/src/components/CoduoDocs/ContentBox/ContentBox.styles.ts b/frontend/src/components/CoduoDocs/ContentBox/ContentBox.styles.ts
@@ -3,7 +3,7 @@ import { Link } from 'react-router-dom';
 import styled from 'styled-components';
 
 export const Title = styled.p`
-  color: ${({ theme }) => theme.color.primary[700]};
+  color: ${({ theme }) => theme.color.primary[800]};
   font-size: ${({ theme }) => theme.fontSize.base};
   font-weight: ${({ theme }) => theme.fontWeight.semibold};
 
@@ -29,7 +29,7 @@ export const ContentList = styled.ul`
 export const ContentItem = styled(Link)<{ $isActive: boolean }>`
   position: relative;
 
-  color: ${({ $isActive, theme }) => ($isActive ? theme.color.black[90] : theme.color.black[60])};
+  color: ${({ $isActive, theme }) => ($isActive ? theme.color.black[900] : theme.color.black[600])};
   font-size: ${({ theme }) => theme.fontSize.lg};
   text-decoration: none;
 
@@ -43,7 +43,7 @@ export const ContentItem = styled(Link)<{ $isActive: boolean }>`
     width: 3px;
     height: 145%;
 
-    background-color: ${({ $isActive, theme }) => ($isActive ? theme.color.secondary[500] : theme.color.black[30])};
+    background-color: ${({ $isActive, theme }) => ($isActive ? theme.color.secondary[500] : theme.color.black[300])};
 
     transition: all 0.2s;
     content: '';

diff --git a/frontend/src/components/CoduoDocs/DocsImage/DocsImage.styles.ts b/frontend/src/components/CoduoDocs/DocsImage/DocsImage.styles.ts
@@ -6,7 +6,7 @@ export const Container = styled.div`
   gap: 2rem;
 `;
 export const Contents = styled.p`
-  color: ${({ theme }) => theme.color.black[90]};
+  color: ${({ theme }) => theme.color.black[900]};
   font-size: ${({ theme }) => theme.fontSize.lg};
 `;
 

diff --git a/frontend/src/components/CoduoDocs/FloatingSidebar/FloatingSidebar.styles.ts b/frontend/src/components/CoduoDocs/FloatingSidebar/FloatingSidebar.styles.ts
@@ -9,7 +9,7 @@ export const Layout = styled.div`
   top: 15rem;
   left: 4%;
 
-  background-color: ${({ theme }) => theme.color.black[10]};
+  background-color: ${({ theme }) => theme.color.black[100]};
 
   @media (width <= 1400px) {
     gap: 1.8rem;

diff --git a/frontend/src/components/CoduoDocs/Quote/Quote.styles.ts b/frontend/src/components/CoduoDocs/Quote/Quote.styles.ts
@@ -9,26 +9,26 @@ export const Container = styled.div`
 `;
 
 export const QuoteBar = styled.span`
-  color: ${({ theme }) => theme.color.black[50]};
+  color: ${({ theme }) => theme.color.black[500]};
   font-size: ${({ theme }) => theme.fontSize.h5};
   font-weight: ${({ theme }) => theme.fontWeight.extraBold};
 `;
 
 export const Content = styled.p`
-  color: ${({ theme }) => theme.color.black[90]};
+  color: ${({ theme }) => theme.color.black[900]};
   font-size: ${({ theme }) => theme.fontSize.base};
   font-weight: ${({ theme }) => theme.fontWeight.extraLight};
 `;
 
 export const TextLink = styled.a`
-  color: ${({ theme }) => theme.color.primary[700]};
+  color: ${({ theme }) => theme.color.primary[800]};
   font-size: ${({ theme }) => theme.fontSize.base};
   font-weight: ${({ theme }) => theme.fontWeight.semibold};
   text-decoration: underline;
 
   transition: color 0.2s ease;
 
   &:hover {
-    color: ${({ theme }) => theme.color.primary[800]};
+    color: ${({ theme }) => theme.color.primary[900]};
   }
 `;
diff --git a/frontend/src/components/CoduoDocs/SourceCode/SourceCode.styles.ts b/frontend/src/components/CoduoDocs/SourceCode/SourceCode.styles.ts
@@ -11,11 +11,11 @@ export const Container = styled.div`
   padding: 3rem 4rem;
   border-radius: 0.5rem;
 
-  background-color: ${({ theme }) => theme.color.black[30]};
+  background-color: ${({ theme }) => theme.color.black[300]};
 `;
 
 export const Content = styled.p`
-  color: ${({ theme }) => theme.color.black[90]};
+  color: ${({ theme }) => theme.color.black[900]};
   font-size: ${({ theme }) => theme.fontSize.base};
   line-height: 1.8;
   white-space: pre-wrap;
@@ -27,19 +27,19 @@ export const CopyIcon = styled(AiFillCopy)`
   top: 1rem;
   right: 1rem;
 
-  color: ${({ theme }) => theme.color.black[50]};
+  color: ${({ theme }) => theme.color.black[500]};
   font-size: 2rem;
 
   cursor: pointer;
 
   &:hover {
-    color: ${({ theme }) => theme.color.black[60]};
+    color: ${({ theme }) => theme.color.black[600]};
 
     transform: scale(1.03);
   }
 
   &:active {
-    color: ${({ theme }) => theme.color.black[70]};
+    color: ${({ theme }) => theme.color.black[700]};
 
     transform: scale(1.06);
   }

diff --git a/.../components/CompletedPairRoom/CategoryManagementModal/CategoryItem/CategoryItem.styles.ts b/.../components/CompletedPairRoom/CategoryManagementModal/CategoryItem/CategoryItem.styles.ts
@@ -29,17 +29,17 @@ export const Item = styled.li<{ $isChecked: boolean }>`
   width: 100%;
   height: 4.4rem;
   padding: 0 1.2rem;
-  border: 1px solid ${({ theme }) => theme.color.black[50]};
+  border: 1px solid ${({ theme }) => theme.color.black[500]};
   border-radius: 0.5rem;
 
-  background-color: ${({ theme, $isChecked }) => ($isChecked ? theme.color.primary[700] : theme.color.black[10])};
-  color: ${({ theme, $isChecked }) => ($isChecked ? theme.color.black[10] : theme.color.black[70])};
+  background-color: ${({ theme, $isChecked }) => ($isChecked ? theme.color.primary[800] : theme.color.black[100])};
+  color: ${({ theme, $isChecked }) => ($isChecked ? theme.color.black[100] : theme.color.black[700])};
   font-size: ${({ theme }) => theme.fontSize.md};
 
   transition: all 0.2s ease-out;
 
   &:hover {
-    background-color: ${({ theme }) => theme.color.primary[700]};
-    color: ${({ theme }) => theme.color.black[10]};
+    background-color: ${({ theme }) => theme.color.primary[800]};
+    color: ${({ theme }) => theme.color.black[100]};
   }
 `;
diff --git a/...rc/components/CompletedPairRoom/CategoryManagementModal/CategoryManagementModal.styles.ts b/...rc/components/CompletedPairRoom/CategoryManagementModal/CategoryManagementModal.styles.ts
@@ -11,7 +11,7 @@ export const Header = styled.div`
   align-items: center;
   gap: 1rem;
 
-  color: ${({ theme }) => theme.color.black[80]};
+  color: ${({ theme }) => theme.color.black[800]};
   font-size: ${({ theme }) => theme.fontSize.lg};
 `;
 

diff --git a/frontend/src/components/CompletedPairRoom/ReferenceCard/Header/Header.tsx b/frontend/src/components/CompletedPairRoom/ReferenceCard/Header/Header.tsx
@@ -15,7 +15,7 @@ const Header = ({ selectedFilteringCategoryName, onButtonClick }: React.PropsWit
   return (
     <S.Layout>
       <S.Container>
-        <IoIosLink size={theme.fontSize.h6} color={theme.color.primary[600]} />
+        <IoIosLink size={theme.fontSize.h6} color={theme.color.primary[700]} />
         <p>링크</p>
       </S.Container>
       <Button

diff --git a/frontend/src/components/CompletedPairRoom/ReferenceCard/ReferenceCard.styles.ts b/frontend/src/components/CompletedPairRoom/ReferenceCard/ReferenceCard.styles.ts
@@ -12,5 +12,5 @@ export const Body = styled.div`
 
   height: calc(100vh - 20rem);
 
-  border-top: 1px solid ${({ theme }) => theme.color.black[30]};
+  border-top: 1px solid ${({ theme }) => theme.color.black[300]};
 `;
diff --git a/...tend/src/components/CompletedPairRoom/ReferenceCard/ReferenceList/ReferenceList.styles.ts b/...tend/src/components/CompletedPairRoom/ReferenceCard/ReferenceList/ReferenceList.styles.ts
@@ -41,7 +41,7 @@ export const EmptyLayout = styled.div`
   height: 0;
   padding: 2rem;
 
-  color: ${({ theme }) => theme.color.black[60]};
+  color: ${({ theme }) => theme.color.black[600]};
   font-size: ${({ theme }) => theme.fontSize.md};
 `;
 
@@ -53,7 +53,7 @@ export const Item = styled.div`
 
   width: 17rem;
   height: 20rem;
-  border: 1px solid ${({ theme }) => theme.color.black[30]};
+  border: 1px solid ${({ theme }) => theme.color.black[300]};
   border-radius: 1.5rem;
 `;
 
@@ -74,8 +74,8 @@ export const EmptyImage = styled.div`
   width: 100%;
   height: 10rem;
 
-  background-color: ${({ theme }) => theme.color.black[40]};
-  color: ${({ theme }) => theme.color.black[70]};
+  background-color: ${({ theme }) => theme.color.black[400]};
+  color: ${({ theme }) => theme.color.black[700]};
   font-size: ${({ theme }) => theme.fontSize.sm};
   line-height: 1.3;
 
@@ -113,7 +113,7 @@ export const Content = styled.p`
   display: -webkit-box;
   overflow: hidden;
 
-  color: ${({ theme }) => theme.color.black[60]};
+  color: ${({ theme }) => theme.color.black[600]};
   font-size: ${({ theme }) => theme.fontSize.xs};
   line-height: 1.5;
   text-overflow: ellipsis;

diff --git a/frontend/src/components/CompletedPairRoom/RetrospectButton/RetrospectButton.styles.ts b/frontend/src/components/CompletedPairRoom/RetrospectButton/RetrospectButton.styles.ts
@@ -7,6 +7,6 @@ export const Layout = styled.div`
   gap: 1rem;
 `;
 export const ButtonPrompt = styled.div`
-  color: ${({ theme }) => theme.color.black[70]};
+  color: ${({ theme }) => theme.color.black[700]};
   font-size: ${({ theme }) => theme.fontSize.sm};
 `;
diff --git a/frontend/src/components/CompletedPairRoom/TodoListCard/Header/Header.tsx b/frontend/src/components/CompletedPairRoom/TodoListCard/Header/Header.tsx
@@ -7,7 +7,7 @@ import * as S from './Header.styles';
 const Header = () => {
   return (
     <S.Layout>
-      <IoIosCheckbox size={theme.fontSize.h6} color={theme.color.primary[600]} />
+      <IoIosCheckbox size={theme.fontSize.h6} color={theme.color.primary[700]} />
       <p>투두 리스트</p>
     </S.Layout>
   );

diff --git a/frontend/src/components/CompletedPairRoom/TodoListCard/TodoItem/TodoItem.styles.ts b/frontend/src/components/CompletedPairRoom/TodoListCard/TodoItem/TodoItem.styles.ts
@@ -10,7 +10,7 @@ export const Layout = styled.div<{ $isChecked: boolean; $isIconHovered: boolean
   padding: 1.6rem;
   border-radius: 1rem;
 
-  background: ${({ $isChecked, theme }) => ($isChecked ? theme.color.black[30] : theme.color.secondary[200])};
+  background: ${({ $isChecked, theme }) => ($isChecked ? theme.color.black[300] : theme.color.secondary[200])};
   font-size: ${({ theme }) => theme.fontSize.md};
 
   transition: background 0.1s ease;
@@ -39,13 +39,13 @@ export const CopyIcon = styled(AiFillCopy)<{ $isChecked: boolean }>`
   width: 1.7rem;
   height: 1.7rem;
 
-  color: ${({ $isChecked, theme }) => ($isChecked ? theme.color.black[50] : theme.color.secondary[500])};
+  color: ${({ $isChecked, theme }) => ($isChecked ? theme.color.black[500] : theme.color.secondary[500])};
 
   transition: color 0.1s ease;
 
   cursor: pointer;
 
   &:hover {
-    color: ${({ $isChecked, theme }) => ($isChecked ? theme.color.black[60] : theme.color.secondary[600])};
+    color: ${({ $isChecked, theme }) => ($isChecked ? theme.color.black[600] : theme.color.secondary[600])};
   }
 `;
diff --git a/frontend/src/components/CompletedPairRoom/TodoListCard/TodoList/TodoList.styles.ts b/frontend/src/components/CompletedPairRoom/TodoListCard/TodoList/TodoList.styles.ts
@@ -19,11 +19,11 @@ export const TodoListContainer = styled.div`
 `;
 
 export const CountText = styled.p`
-  color: ${({ theme }) => theme.color.black[70]};
+  color: ${({ theme }) => theme.color.black[700]};
   font-size: ${({ theme }) => theme.fontSize.sm};
 `;
 
 export const EmptyText = styled.p`
-  color: ${({ theme }) => theme.color.black[60]};
+  color: ${({ theme }) => theme.color.black[600]};
   font-size: ${({ theme }) => theme.fontSize.md};
 `;
diff --git a/frontend/src/components/CompletedPairRoom/TodoListCard/TodoListCard.styles.ts b/frontend/src/components/CompletedPairRoom/TodoListCard/TodoListCard.styles.ts
@@ -12,5 +12,5 @@ export const Body = styled.div`
 
   height: calc(100vh - 20rem);
 
-  border-top: 1px solid ${({ theme }) => theme.color.black[30]};
+  border-top: 1px solid ${({ theme }) => theme.color.black[300]};
 `;
diff --git a/frontend/src/components/Landing/HowToPair/HowToPair.styles.ts b/frontend/src/components/Landing/HowToPair/HowToPair.styles.ts
@@ -17,8 +17,8 @@ export const Layout = styled.div`
     ${({ theme }) => theme.color.secondary[100]},
     ${({ theme }) => theme.color.primary[200]}
   );
-  background-color: ${({ theme }) => theme.color.black[10]};
-  color: ${({ theme }) => theme.color.black[80]};
+  background-color: ${({ theme }) => theme.color.black[100]};
+  color: ${({ theme }) => theme.color.black[800]};
   line-height: 1.2;
 `;
 
@@ -80,35 +80,35 @@ export const SectionText = styled.div`
 export const SectionTitle = styled.h1`
   margin: 2rem 0;
 
-  color: ${({ theme }) => theme.color.primary[800]};
+  color: ${({ theme }) => theme.color.primary[900]};
   font-size: ${({ theme }) => theme.fontSize.h3};
   font-weight: ${({ theme }) => theme.fontWeight.bold};
 `;
 
 export const Paragraph = styled.p`
   margin: 1rem 0;
 
-  color: ${({ theme }) => theme.color.black[80]};
+  color: ${({ theme }) => theme.color.black[800]};
   font-size: ${({ theme }) => theme.fontSize.h6};
   font-weight: ${({ theme }) => theme.fontWeight.medium};
   line-height: 2;
 `;
 
 export const Strong = styled.strong`
-  color: ${({ theme }) => theme.color.primary[700]};
+  color: ${({ theme }) => theme.color.primary[800]};
   font-weight: ${({ theme }) => theme.fontWeight.bold};
 `;
 
 export const Highlighted = styled.span`
-  color: ${({ theme }) => theme.color.primary[700]};
+  color: ${({ theme }) => theme.color.primary[800]};
   font-size: ${({ theme }) => theme.fontSize.h6};
   font-weight: ${({ theme }) => theme.fontWeight.bold};
 `;
 
 export const Conclusion = styled.p`
   padding-left: 1rem;
 
-  color: ${({ theme }) => theme.color.primary[800]};
+  color: ${({ theme }) => theme.color.primary[900]};
   font-style: italic;
   font-size: ${({ theme }) => theme.fontSize.lg};
   font-weight: ${({ theme }) => theme.fontWeight.semibold};

diff --git a/frontend/src/components/Main/PairRoomCreateModal/PairRoomCreateModal.styles.ts b/frontend/src/components/Main/PairRoomCreateModal/PairRoomCreateModal.styles.ts
@@ -20,11 +20,11 @@ export const Content = styled.div`
   cursor: pointer;
 
   &:hover {
-    background-color: ${({ theme }) => theme.color.black[30]};
+    background-color: ${({ theme }) => theme.color.black[300]};
   }
 
   &:active {
-    background-color: ${({ theme }) => theme.color.black[40]};
+    background-color: ${({ theme }) => theme.color.black[400]};
   }
 `;
 export const PairRoomCode = styled.p`
@@ -37,7 +37,7 @@ export const IconBox = styled.div`
   padding-bottom: 0;
   border-radius: 0.5rem;
 
-  color: ${({ theme }) => theme.color.primary[500]};
+  color: ${({ theme }) => theme.color.primary[600]};
 `;
 
 export const ModalBodyWrapper = styled.div`

diff --git a/frontend/src/components/MyPage/ListLayout/ListLayout.styles.ts b/frontend/src/components/MyPage/ListLayout/ListLayout.styles.ts
@@ -3,6 +3,6 @@ import styled from 'styled-components';
 export const EmptyText = styled.p`
   margin-top: 5rem;
 
-  color: ${({ theme }) => theme.color.black[70]};
+  color: ${({ theme }) => theme.color.black[700]};
   font-size: ${({ theme }) => theme.fontSize.base};
 `;
diff --git a/frontend/src/components/MyPage/MyPageTab/MyPageTab.styles.ts b/frontend/src/components/MyPage/MyPageTab/MyPageTab.styles.ts
@@ -11,18 +11,18 @@ export const Tab = styled.button<{ $isActive: boolean }>`
   cursor: pointer;
 
   p {
-    color: ${({ theme }) => theme.color.black[80]};
+    color: ${({ theme }) => theme.color.black[800]};
     font-size: ${({ theme }) => theme.fontSize.lg};
     font-weight: ${({ theme }) => theme.fontWeight.medium};
   }
 
   ${({ theme, $isActive }) =>
     $isActive &&
     `
-      border-bottom: 2px solid ${theme.color.primary[700]};
+      border-bottom: 2px solid ${theme.color.primary[800]};
       
       p {
-        color: ${theme.color.primary[700]};
+        color: ${theme.color.primary[800]};
       }
     `}
 `;