Remove some hardcoded CSS properties

front/src/modules/auth/components/ui/FooterNote.tsx

@@ -7,7 +7,7 @@ const StyledContainer = styled.div`
   align-items: center;
   color: ${({ theme }) => theme.font.color.tertiary};
   display: flex;
-  font-size: ${({ theme }) => theme.font.size.sm}px;
+  font-size: ${({ theme }) => theme.font.size.sm};
   text-align: center;
 `;
 

front/src/modules/comments/components/CommentChip.tsx

@@ -41,9 +41,8 @@ const StyledChip = styled.div`
 const StyledCount = styled.div`
   align-items: center;
   display: flex;
-  font-size: 12px;
-
-  font-weight: 500;
+  font-size: ${({ theme }) => theme.font.size.sm};
+  font-weight: ${({ theme }) => theme.font.weight.medium};
   justify-content: center;
 `;
 

front/src/modules/comments/components/CommentThreadCreateMode.tsx

@@ -49,9 +49,9 @@ const StyledEditableTitleInput = styled.input`
 
   flex-direction: column;
   font-family: Inter;
-  font-size: 20px;
+  font-size: ${({ theme }) => theme.font.size.xl};
   font-style: normal;
-  font-weight: 600;
+  font-weight: ${({ theme }) => theme.font.weight.semiBold};
   justify-content: center;
 
   line-height: 120%;

front/src/modules/comments/components/CommentThreadEditMode.tsx

@@ -54,9 +54,9 @@ const StyledEditableTitleInput = styled.input`
 
   flex-direction: column;
   font-family: Inter;
-  font-size: 20px;
+  font-size: ${({ theme }) => theme.font.size.xl};
   font-style: normal;
-  font-weight: 600;
+  font-weight: ${({ theme }) => theme.font.weight.semiBold};
   justify-content: center;
 
   line-height: 120%;

front/src/modules/comments/components/Timeline.tsx

@@ -43,15 +43,15 @@ const StyledTimelineEmptyContainer = styled.div`
 
 const StyledEmptyTimelineTitle = styled.div`
   color: ${({ theme }) => theme.font.color.secondary};
-  font-size: 24px;
-  font-weight: 600;
+  font-size: ${({ theme }) => theme.font.size.xxl};
+  font-weight: ${({ theme }) => theme.font.weight.semiBold};
   line-height: 120%;
 `;
 
 const StyledEmptyTimelineSubTitle = styled.div`
   color: ${({ theme }) => theme.font.color.extraLight};
-  font-size: 24px;
-  font-weight: 600;
+  font-size: ${({ theme }) => theme.font.size.xxl};
+  font-weight: ${({ theme }) => theme.font.weight.semiBold};
   line-height: 120%;
 `;
 
@@ -132,7 +132,7 @@ const StyledCard = styled.div`
 
 const StyledCardTitle = styled.div`
   color: ${({ theme }) => theme.font.color.primary};
-  font-weight: 500;
+  font-weight: ${({ theme }) => theme.font.weight.medium};
   line-height: 150%;
 `;
 

front/src/modules/ui/components/buttons/DropdownButton.tsx

@@ -22,8 +22,8 @@ const StyledButton = styled.button<ButtonProps>`
   border-radius: 4px;
   color: ${({ theme }) => theme.font.color.secondary};
   display: flex;
-  font-size: 13px;
-  font-weight: 500;
+  font-size: ${({ theme }) => theme.font.size.md};
+  font-weight: ${({ theme }) => theme.font.weight.medium};
   gap: 8px;
   height: 24px;
   line-height: 150%;

front/src/modules/ui/components/form/DatePicker.tsx

@@ -22,7 +22,7 @@ const StyledContainer = styled.div`
     font-size: ${({ theme }) => theme.font.size.md};
     border: none;
     display: block;
-    font-weight: 400;
+    font-weight: ${({ theme }) => theme.font.weight.medium};
   }
 
   & .react-datepicker-popper {

front/src/modules/ui/components/inputs/AutosizeTextInput.tsx

@@ -27,8 +27,8 @@ const StyledTextArea = styled(TextareaAutosize)`
   border-radius: 5px;
   color: ${({ theme }) => theme.font.color.primary};
   font-family: inherit;
-  font-size: 13px;
-  font-weight: 400;
+  font-size: ${({ theme }) => theme.font.size.md};
+  font-weight: ${({ theme }) => theme.font.weight.medium};
   line-height: 16px;
   overflow: auto;
   padding: 8px;
@@ -42,7 +42,7 @@ const StyledTextArea = styled(TextareaAutosize)`
 
   &::placeholder {
     color: ${({ theme }) => theme.font.color.light};
-    font-weight: 400;
+    font-weight: ${({ theme }) => theme.font.weight.medium};
   }
 `;
 

front/src/modules/ui/components/table/ColumnHead.tsx

@@ -10,7 +10,7 @@ const StyledTitle = styled.div`
   align-items: center;
   display: flex;
   flex-direction: row;
-  font-weight: 500;
+  font-weight: ${({ theme }) => theme.font.weight.medium};
   height: ${({ theme }) => theme.spacing(8)};
   padding-left: ${({ theme }) => theme.spacing(2)};
 `;

front/src/modules/ui/components/table/action-bar/EntityTableActionBarButton.tsx

@@ -32,7 +32,7 @@ const StyledButton = styled.div<StyledButtonProps>`
 `;
 
 const StyledButtonLabel = styled.div`
-  font-weight: 500;
+  font-weight: ${({ theme }) => theme.font.weight.medium};
   margin-left: ${({ theme }) => theme.spacing(2)};
 `;
 

front/src/modules/ui/components/table/table-header/SortAndFilterBar.tsx

@@ -43,7 +43,7 @@ const StyledCancelButton = styled.button`
   border: none;
   color: ${({ theme }) => theme.font.color.secondary};
   cursor: pointer;
-  font-weight: 500;
+  font-weight: ${({ theme }) => theme.font.weight.medium};
   margin-left: auto;
   margin-right: ${({ theme }) => theme.spacing(2)};
   padding: ${(props) => {

front/src/modules/ui/components/table/table-header/SortOrFilterChip.tsx

@@ -45,7 +45,7 @@ const StyledDelete = styled.div`
 `;
 
 const StyledLabelKey = styled.div`
-  font-weight: 500;
+  font-weight: ${({ theme }) => theme.font.weight.medium};
 `;
 
 function SortOrFilterChip({

front/src/modules/ui/components/table/table-header/TableHeader.tsx

@@ -27,7 +27,7 @@ const StyledTableHeader = styled.div`
   color: ${({ theme }) => theme.font.color.secondary};
   display: flex;
   flex-direction: row;
-  font-weight: 500;
+  font-weight: ${({ theme }) => theme.font.weight.medium};
   height: 40px;
   justify-content: space-between;
   padding-left: ${({ theme }) => theme.spacing(3)};
@@ -49,7 +49,7 @@ const StyledViewSection = styled.div`
 
 const StyledFilters = styled.div`
   display: flex;
-  font-weight: 400;
+  font-weight: ${({ theme }) => theme.font.weight.medium};
   gap: 2px;
 `;
 

front/src/modules/ui/layout/navbar/NavTitle.tsx

@@ -8,7 +8,7 @@ const StyledTitle = styled.div`
   color: ${({ theme }) => theme.font.color.light};
   display: flex;
   font-size: ${({ theme }) => theme.font.size.xs};
-  font-weight: 600;
+  font-weight: ${({ theme }) => theme.font.weight.semiBold};
   padding-bottom: ${({ theme }) => theme.spacing(2)};
   padding-left: ${({ theme }) => theme.spacing(1)};
   padding-top: ${({ theme }) => theme.spacing(8)};

front/src/modules/ui/layout/navbar/NavWorkspaceButton.tsx

@@ -41,7 +41,7 @@ const StyledName = styled.div`
   color: ${({ theme }) => theme.font.color.primary};
   font-family: 'Inter';
   font-size: ${({ theme }) => theme.font.size.md};
-  font-weight: 500;
+  font-weight: ${({ theme }) => theme.font.weight.medium};
   margin-left: ${({ theme }) => theme.spacing(2)};
 `;
 

front/src/modules/ui/layout/right-drawer/components/RightDrawerTopBar.tsx

@@ -10,7 +10,7 @@ const StyledRightDrawerTopBar = styled.div`
   color: ${({ theme }) => theme.font.color.secondary};
   display: flex;
   flex-direction: row;
-  font-size: 13px;
+  font-size: ${({ theme }) => theme.font.size.md};
   justify-content: space-between;
   min-height: 40px;
   padding-left: 8px;
@@ -19,7 +19,7 @@ const StyledRightDrawerTopBar = styled.div`
 
 const StyledTopBarTitle = styled.div`
   align-items: center;
-  font-weight: 500;
+  font-weight: ${({ theme }) => theme.font.weight.medium};
   margin-right: ${({ theme }) => theme.spacing(1)};
 `;
 

front/src/pages/companies/CompanyShow.tsx

@@ -141,9 +141,9 @@ const StyledDate = styled.div`
 
 const StyledTitle = styled.div`
   color: ${({ theme }) => theme.font.color.primary};
-  font-size: 20px;
+  font-size: ${({ theme }) => theme.font.size.xl};
   font-style: normal;
-  font-weight: 600;
+  font-weight: ${({ theme }) => theme.font.weight.semiBold};
   line-height: 120%;
 `;